vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex的五种状态:
state:存储状态,也就是变量。
getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多;
mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit('SET_AGE', 18)。和vue中的methods类似。
actions:与mutaions类似,不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch('nameAsyn')。
modules: store的子模块,内容就当于是store的一个实列。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()。
初始化vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:0
todos: [ { id:1, text: '...', done: true },
{ id:2, text: '...', done: false } ]
},
getters:{
doneTodos:state=> { return state.todos.filter(todo => todo.done) },
doneTodosCount: (state, getters) => { return getters.doneTodos.length}
},
mutations:{
add: state => state.count++,
subtractions: state => state.count--
},
actions:{
increment (context) {
context.commit('add')
}
},
modules:{
}
});
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
未完待续