vuex学习

vuex 就是” 前端的数据库“。

1、State 就是数据库。
2、Mutations 就是我们把数据存入数据库的 API，用来修改 state 的。
3、getters 是我们从数据库里取数据的 API。
4、actions 呢。你想呀，后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中。其实这就是 action的过程。当然你也可以不做处理，直接丢到数据库，所以vuex也可以在 action 中直接存，就是直接mutation。

vuex 的数据流：

后（qian）端通过 action处理数据，然后通过 mutation 把处理后的数据放入数据库（state）中，谁要用就通过 getter从数据库（state）中取。

一段基本的vuex结构的代码

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 包含有五个基本的对象：

1、state：存储状态。也就是变量；
2、getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
3、mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
4、actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
5、modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

更详细可以参考：
https://segmentfault.com/a/1190000009404727
mapgetter mapmutation：https://www.jianshu.com/p/506da488d2a1

psb.gif