扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Action 类似于mutation，不同在于：
创新互联是专业的贡山网站建设公司，贡山接单;提供成都网站制作、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行贡山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
- Action 提交的是mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
代码实例
store.js
actions: {
// 商品半价
disCount (content) {
// actions中通过commit()提交mutations中的goodsPriceHalve()函数
content.commit('goodsPriceHalve')
},
// 异步的商品半价
/**
* disCountAsync ({commit}){
setTimeout(() => {
commit('goodsPriceHalve')
},1000)
} */
disCountAsync ({commit}){
setTimeout(() => {
commit('goodsPriceHalve')
},1000)
},
// 统一修改商品名字
/* acyionChangeName()的第一个参数可以理解成是一个对象，第二个参数为事件传递过来的参数
这个参数也需要传递给mutations中相对应的函数中*/
acyionChangeName(content,payload){
// 载荷形式
content.commit('changeName',payload);
},
acyionChangeNameAsync (content,payload){
setTimeout(() => {
// 对象形式
content.commit('changeName',payload.payload)
},1000)
}
}这里有同步也有异步，有载荷也有没有载荷。
page7.vue
我是第五个页面
商品：{{item.name}}
价格：￥{{item.price}}
page8.vue
我是第六个页面
商品：{{item.name}}
价格：￥{{item.price}}
乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作。
Actions 支持同样的载荷方式和对象方式进行分发。
效果图
代码执行过程：
上面的Action执行过程是：按钮点击–>执行按钮点击事件方法–>执行$store.dispatch('avtions中的对应的函数名',参数)–>执行actions里面对应的方法–>执行mutations里面对应的方法–>修改state里面对应的数据–>页面渲染。
小结：
在Mutation中我们组件调用方法使用的是commit，在Action中组件使用的却是dispatch分发。看过vue1.x文档的，可能对commit和dispatch就有点感觉了，或者你看过socket。
这里主要要明白以下几点：
1.Mutation是同步的，Action是异步的；
2.Mutation是直接变更状态，Action提交的是mutation；
3.Actions和Mutation 都支持载荷方式和对象方式进行分发。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对创新互联的支持。如果你想了解更多相关内容请查看下面相关链接
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网