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://www.greatytc.com/p/506da488d2a1