1/Actions 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters
期中dispach()实现异步提交,而commit()实现同步提交;dispach("方法名",值);commit(“方法名”,值)
action中的函数只包含一个context参数,多余的参数将被忽略。
context的话就相当于state的父亲,上一级,包含着state中的所有属性
context:{
state, 等同于store.$state,若在模块中则为局部状态
rootState, 等同于store.$state,只存在模块中
commit, 等同于store.$commit
dispatch, 等同于store.$dispatch
getters 等同于store.$getters
}
常规写法调用的时候会使用context.commit,但更多的是使用es6的变量解构赋值,也就是直接在参数的
位置写自己想要的属性,如:{commit}。
- Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
2/mutations里面的函数必须带state的参数,这样就可以把state中的值传入到函数中
mutation:(必须是同步函数)
更改store中state值的唯一方法就是提交mutation,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:
mutations: {
addNum(state,Payload) {
state.num +=Payload.amount
}
}
不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
//页面中的操作(一、不带参数)
methods:{
add(){
this.$store.commit('addNum')
}
}
//二、带参数的情况下
data(){
argument:{
amount:10
},
methods:{
add(){
this.$store.commit('addNum',this.arguments)
}
}
区别:
action和mutation都可以改变state中数据的状态,但是action可以处理异步函数可以在devtool中追踪数据变化,而mutation只可以处理同步函数,当处理异步函数的时候检测不到数据变化;