vuex实现数据共享

vuex解决的是兄弟组件之间传信，虽说也可以用总线bus解决，但是一旦项目大了传的东西一多就不如vuex方便，总线bus在简单传值用的比较多。
这里City页面和Home页面没有共同的父组件->使用vuex框架

City和Home组件实现数据传递.png

1.vuex

vuex——vue状态管理模式
包含三部分：

Actions：存放异步操作或者复杂的批操作
Mutations: 存放为state的成员操作
State：存放公用数据，驱动应用的数据源
当组件使用数据时，首先经过Actions再经过Mutations，再到State里。（单向数据获取）。不过不一定会经过Actions，有时候可以跳过。

vuex工作流程.png

2.传递city信息展示

点击当前城市"厦门" 进入到城市选择页面，对应的当前城市“厦门”，点击下面热门城市能替换上面的当前城市，返回首页城市也相应更改。

city传递展示.gif

3.vuex使用

3.1 当前城市信息读取

以前的当前城市信息都是写死的，现在在src目录下创建store，在里面创建index.js。

store用来存放公用数据.png

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    // 创建数据
    state: {
        city: '厦门'
    },
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
        }
    }
})

在main.js里引用 import store from './store/index'，并在new Vue()里注册组件。此时，定义好的store就通过总组件Vue分配到各个组件里，直接{{this.$store.state.city}}就可使用。
这样在Header.vue和List.vue里就可以动态获取city，而不是用写死的数据。

3.2 点击"热门城市"切换"当前城市"

在热门城市里绑定函数 @click="handleCityClick(item.name)"，函数里接收了一个参数item.name，通过dispatch方法传到Actions里的changeCity函数中，再通过commit方法传到mutations的函数里，改变Store的值，进而所有接收city参数的地方都发生了改变。

methods:{
        handleCityClick(city){
            this.$store.dispatch('changeCity',city)
        }
    }

同样，在城市列表所有的<li>里定义函数，点击就改变当前城市。

点击阿拉善盟后当前城市显示.png

3.3 页面跳回首页

在点击城市函数里加入一句this.$router.push('/')，就是返回页面到首页'/'里。

 handleCityClick(city){
            this.$store.dispatch('changeCity',city)
            this.$router.push('/')
        }

点击城市返回首页.gif

4.localStorage 页面城市存储

如上，虽然点击更新了城市，但是页面一刷新，还是回到了“厦门”。这就需要把数据保存下来，再下次打开时还是上次的数据。