vuex的使用心得

今天的工作内容-----vuex的使用心得：

都知道，对于小型的项目来说不必使用vuex，但是对于需要把共享的变量全部存储在一个对象里面，然后把这个对象放在顶层组件中以供其他组件使用。其实vuex就是类似整个vue项目的全局变量。

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

这个是最基本完整的vuex代码，包含五个基本对象：

state：存储状态，也就是数据。

getters：派生状态，类似vue中的computed,就是set，get中的get，外部调用方式：store.getters.personInfo().【我们一般使用getters来获取state的状态，而不是直接使用state】。

mutations：提交状态修改。也就是set，这个是vuex中唯一修改state的方式，但是不支持异步操作。第一个参数默认是state，外部调用：store.commit('SET_AGE',18),类似于vue中的mothods。

actions：和mutations类似，不过actions是支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')

modules:store的子模块，内容相当于是store的一个实例，调用方法只要加上当前的子模块名，例如：store.a.getters.xxx()

vue-cli中使用vuex的方式

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2