const store = new Vuex.Store({
state: {
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
},
//--通过方法访问,调用方式:store.getters.getTodoById(2)
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
},
// --Mutation 必须是同步函数
mutations: {
//--调用方式:store.commit('increment','10'),其中n为载荷【即参数,基本为一个object,可不写】
increment (state,n) {
// 变更状态
state.count++
}
},
//-- action 内部执行异步
actions: {
//--context是一个与store 实例具有相同方法和属性的对象,
increment (context) {
context.commit('increment')
},
//-- ES5的 参数解构 来简化代码,commit为context对象的参数.obj为store.dispacth时传入的参数
increment ({commit},obj) {
context.commit('increment')
}
}
})
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
学习链接:https://vuex.vuejs.org/zh/guide/state.html