Vue核心概念行动的总结

行动类似于突变，不同在于：

-行动提交的是突变，而不是直接变更状态。

-行动可以包含任意异步操作。

行动函数接受一个与商店实例具有相同方法和属性的语境对象，因此你可以调用上下文。提交提交一个突变，或者通过上下文。状态和context.getters来获取状态和吸气剂。当我们在之后介绍到模块时，你就知道语境对象为什么不是商店实例本身了。

代码实例

store.js

操作： { //商品半价贴现（内容){ //操作中通过提交()提交突变中的商品价格减半()函数内容。提交(' goodservicehalve ')}，//异步的商品半价/* * * discustasync({ commit }){ setTimeout(()={ commit(' goodservicehalf ')}，1000) } */discustasync({ commit }){ setTimeout(()={ commit(' goodservicehalf ')}，1000)}，//统一修改商品名字/* AchionChangeName()的第一个参数可以理解成是一个对象，第二个参数为事件传递过来的参数这个参数也需要传递给突变中相对应的函数中*/AchionChangeName(内容，有效负载){ //载荷形式content.commit('changeName '，有效负载);}，acyionChangeNameAsync(内容，有效负载){ setTimeout(()={ //对象形式content.commit('changeName '，payload.payload) }，1000) } }这里有同步也有异步，有载荷也有没有载荷。

第七页。某视频剪辑软件

模板div h2我是第五个页面/h2 div输入类型=“文本”占位符='请输入商品的新名字v-model=' invalue '按钮@ click=' disCountPrice()'同步商品价格减半/button button @ click=' disCountPriceAsync()'异步商品价格减半/button/div ul class=' ul _ list ' Li v-for=' goodsListHalv ' p class=' name '中的项目商品：{{item.name}}/p p class='price '价格：{ { item }。价格} }/p/Li/ul/div/模板脚本导出默认值{ data(){ return { invalue : ' '，} }，computed : { goodslistalv(){ return this .$商店。国家。goodslist} }，methods: { //注意这里使用箭头函数可能会报错//同步商品价格减半；触发事件提交行动中的折扣()函数折扣价格：函数(){这个.$商店。调度(' DIrectory ')}，//异步商品价格减半disCountPriceAsync:函数(){这个.$商店。dispatch(' discusta sync ')}，} }/scriptpage8.vue

模板div h2我是第六页/H2 div输入类型=' text '占位符='请输入商品的新名称' v-model=' in value ' Button @ click=' acionchangename()'加载修改商品的名称(字符串)/Button Button @ click=' acionchangenameasync()'加载修改商品的名称(对象)/Button/Divul class=' ul _ list ' Li v-for=' item in goodsListHalv ' 3360 key=' item . id ' p class=' name '商品：{ }$ store . state . goodslist；} }，methods: {//注意这里使用箭头函数可能会报错//同步修改商品名称；触发事件提交操作中的AcyionChangeName()函数AcyionChangeName : function(){ this。$ store . dispatch(' acyionchangename '，此。in value)}，//异步修改商品名称；对象对象中有两个属性类型事件函数，有效负载参数acyionchangenameasync : function(){ this。$ store . dispatch({ type : ' acyionchangenameasync '，Payload:this。in value })}，}}/script乍一看感觉是多余的。我们直接分发突变不是更方便吗？实际上，情况并非如此。还记得突变必须同步执行这个限制吗？行动不拘泥！我们可以在动作内部执行异步操作。

操作支持相同的分发加载模式和对象模式。

翻译

代码执行过程：

以上Action执行流程如下：按钮点击执行按钮点击事件方法执行$ store . dispatch(' avons中对应的函数名'，参数)执行actions中对应的方法执行突变中对应的方法修改state中对应的数据渲染页面。

总结：

在突变中，我们的组件使用提交来调用方法，但是在动作中，组件使用分派分布。看过vue1.x文档的人可能对commit和dispatch有些感觉，或者你见过socket。

这里我们主要应该了解以下几点：

1.突变是同步的，动作是异步的；

2.突变是直接改变状态，动作提交突变；

3.都是3。动作和突变支持负载模式和对象模式下的分布。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接