Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。

在vue脚手架中简单应用vuex来实现组件之间传递数据，当然组件之间传递可以使用emit，但页面组件越来越多涉及到数据传递就越来越麻烦，vuex的便利性就体现出来。

通常设计store对象都包含4个属性：state,getters,actions,mutations。

如何理解这4个属性呢，从自己的话来理解：

• state (类似存储全局变量的数据)
• getters (提供用来获取state数据的方法)
• actions (提供跟后台接口打交道的方法，并调用mutations提供的方法)
• mutations (提供存储设置state数据的方法)

项目中store.js的概要设计可如下：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
let store = new Vuex.Store({
    // 1. state
    state:{
        city:"城市名"
    },

    // // 2. getters
    getters:{
        // 参数列表state指的是state数据
        getCityFn(state){
            return state.city;
        }
    },
    // 3. actions
    // 通常跟api接口打交道
    actions:{
        // 设置城市信息
        // 参数列表：{commit, state}
        // state指的是state数据
        // commit调用mutations的方法 
        // name就是调用此方法时要传的参数
        setCityName({commit,state}, name){
            // 跟后台打交道
            // 调用mutaions里面的方法
            commit("setCity", name);
        }
    },
    // 4. mutations
    mutations:{
        // state指的是state的数据
        // name传递过来的数据
        setCity(state, name){
            state.city = name;//将传参设置给state的city
        }
    }
});

export default store;

在main.js中引用vuex，就可以在组件使用this.$store来调用方法

import store from './store/store.js';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

当需要更改state中的方法时，通过this.$store.dispatch来调用store.js中actions所提供的方法，并将修改的内容传参过去，就完成啦。例如：

// 调用vuex的ations设置城市的值
this.$store.dispatch("setCityName", 'zhengzhou');