操作类似于突变,不同在于:
——行动提交的是突变,而不是直接变更状态。
——行动可以包含任意异步操作。
操作函数接受一个与商店实例具有相同方法和属性的背景下对象,因此你可以调用context.commit提交一个突变,或者通过上下文。状态和上下文。getter方法来获取状态和getter。当我们在之后介绍到模块时,你就知道上下文对象为什么不是商店实例本身了。
<强>代码实例
<强> store.js
行动:{//商品半价
折扣(内容){//操作中通过commit()提交中突变的goodsPriceHalve()函数
content.commit (“goodsPriceHalve”)
},//异步的商品半价/* *
* disCountAsync({提交}){
setTimeout(()=比;{
提交(“goodsPriceHalve”)
},1000)
} */disCountAsync({提交}){
setTimeout(()=比;{
提交(“goodsPriceHalve”)
},1000)
},//统一修改商品名字/* acyionChangeName()的第一个参数可以理解成是一个对象,第二个参数为事件传递过来的参数
这个参数也需要传递给突变中相对应的函数中*/acyionChangeName(内容、有效载荷){//载荷形式
content.commit (changeName,载荷);
},
acyionChangeNameAsync(内容、有效载荷){
setTimeout(()=比;{//对象形式
content.commit (changeName, payload.payload)
},1000)
}
}
这里有同步也有异步,有载荷也有没有载荷。
<强> page7.vue
& lt; template>
& lt; div>
& lt; h3>我是第五个页面& lt;/h3>
& lt; div>
& lt;输入类型=拔谋尽闭嘉环?扒胧淙肷唐返男旅帧皏模型=癷npValue”比;
& lt;按钮@click=" disCountPrice()在同步商品价格减半& lt;/button>
& lt;按钮@click=" disCountPriceAsync()在异步商品价格减半& lt;/button>
& lt;/div>
& lt; ul类=皍l_list”比;
& lt;李v=癵oodsListHalv项目”在
& lt; p类="名称"祝辞商品:{{item.name}} & lt;/p>
& lt; p类="价格"祝辞价格:￥{{item.price}} & lt;/p>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
inpValue:”,
}
},
计算:{
goodsListHalv () {
返回这个。store.state.goodsList美元;
}
},
方法:{//注意这里使用箭头函数可能会报的错//同步商品价格减半;触发事件提交行为中()的折扣函数
disCountPrice:函数(){
这个。store.dispatch美元(折扣)
},//异步商品价格减半
disCountPriceAsync:函数(){
这个。store.dispatch美元(“disCountAsync”)
},
}
}
& lt;/script>
<强> page8.vue
& lt; template>
& lt; div>
& lt; h3>我是第六个页面& lt;/h3>
& lt; div>
& lt;输入类型=拔谋尽闭嘉环?扒胧淙肷唐返男旅帧皏模型=癷npValue”比;
& lt;按钮@click=" acyionChangeName()在载荷修改商品的名字(字符串)& lt;/button>
& lt;按钮@click=" acyionChangeNameAsync()在载荷修改商品的名字(对象)& lt;/button>
& lt;/div>
& lt; ul类=皍l_list”比;
李& lt; v=癵oodsListHalv项”:关键=癷tem.id”比;
& lt; p类="名称"祝辞商品:{{item.name}} & lt;/p>
& lt; p类="价格"祝辞价格:￥{{item.price}} & lt;/p>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
inpValue:”,
}
},
计算:{
goodsListHalv () {
返回这个。store.state.goodsList美元;
}
},
方法:{//注意这里使用箭头函数可能会报的错//同步修改商品的名字;触发事件提交行为中的acyionChangeName()函数
acyionChangeName:函数(){
美元。store.dispatch (acyionChangeName, this.inpValue)
},//异步修改商品的名字;对象对象中包含两个属性类型事件函数,有效载荷参数
acyionChangeNameAsync:函数(){
美元。store.dispatch ({
类型:“acyionChangeNameAsync”,
有效载荷:this.inpValue
}）
},
}
}
& lt;/script>
乍一眼看上去感觉多此一举,我们直接分发突变岂不更方便?实际上并非如此,还记得突变必须同步执行这个限制么?行动就不受约束!我们可以在行动内部执行异步操作。
行动支持同样的载荷方式和对象方式进行分发。
