State
访问方式: 通过属性访问和辅助函数
- 通过属性访问: this.$store.state
- 辅助函数: ..mapState
定义
const state = {
products,
amount
}
使用
this.$store.state.products,
this.$store.state.amount
// ...mapState
...mapState({ products: state => state.products }) // 等价于 ...mapState({ products: 'products' })
// 当映射的计算属性的名称与 state 的子节点名称相同,我们可以传入一个数组
...mapState(['products','amount'])
Getter(可以认为是store的计算属性)
访问方式: 通过属性访问和辅助函数
- 通过属性访问: this.$store.getters
- 辅助函数: ..mapGetters（只是将store中的getter映射到局部计算属性）
定义
// store.js
state: {
todos: [
{id: 1,text:"today is come over",done: true},
{id: 2, text: "tomorrow is comming",done: false}
],
count: 10
},
getters:{
doneTodos: state=>{
state.todos = state.todos.filter(todo => todo.done)
return state.todos;
},
doneTodoCount: (state) =>{
return state.todos.length
}
}
此外，getters可以接受两个参数
getters:{
doneTodos: （state，getters )=>{
state.todos = state.todos.filter(todo => todo.done)
return state.todos;
},
doneTodoCount: (state，getters) =>{
return getters.doneTodos
}
}
使用
// 组件
computed: {
...mapGetters({
"done":"doneTodos",
"doneTodo":"doneTodoCount"
})
},
created() {
console.log(this.done);
},
当然咯可以带参数
// 定义
getters:{
doneTodos: (state)=>(id)=>{
return state.todos.filter(todo => todo.id === id).map(item => item.text)
}
// 使用
this.$store.getters.doneTodos(1)
// 如果使用的是...mapGetters
...mapGetters([
'doneTodos'
])
// 调用的时候
doneTodos(id)
Mutation（类似事件，但是是同步事务）
访问方式: 通过属性访问和辅助函数
- 通过属性访问: this.$store.commit()
- 辅助函数: ..mapMutations
定义
mutations: {
// 这里的palyload 是一个对象
// playload 等价于 { type: 'ADD_MUTATIONS' , amount: 10}
[ADD_MUTATIONS](state,playload){
state.count = state.count + playload.amount
}
}
addCount(){
this.$store.commit('ADD_MUTATIONS',{amount: 10})
}
// ADD_MUTATIONS 是定义的一个常量
使用
...mapMutations({
add: 'addCount'
})
// or
...mapMutations([
'addCount'
])
// ...mapMutations 也可以传参
this.add({amount: 10}) // or this.addCount({amount: 10})
Actions（类似于mutation,不同在于action 提交mutation，而且可以进行异步操作)
访问方式: 通过属性访问和辅助函数
- 通过属性访问: this.$store.dispatch()
- 辅助函数: ..mapActions
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
// store.js
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
// 组件内
this.$store.dispath('actionB').then()
当然也有...mapActions
模块
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
