Vue核心概念Action的总结

来源：动视网责编：小采时间：2020-11-27 22:01:57

Vue核心概念Action的总结

Vue核心概念Action的总结:Action 类似于mutation，不同在于： - Action 提交的是mutation，而不是直接变更状态。 - Action 可以包含任意异步操作。 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 m

推荐度：

点击下载本文 文档为doc格式

导读Vue核心概念Action的总结:Action 类似于mutation，不同在于： - Action 提交的是mutation，而不是直接变更状态。 - Action 可以包含任意异步操作。 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 m

Action 类似于mutation，不同在于：

- 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

<template>
 <div>
 <h2>我是第五个页面</h2>
 <div>
 <input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
 <button @click="disCountPrice()">同步商品价格减半</button>
 <button @click="disCountPriceAsync()">异步商品价格减半</button>
 </div>
 <ul class="ul_list">
 <li v-for="item in goodsListHalv">
 <p class="name">商品：{{item.name}}</p>
 <p class="price">价格：￥{{item.price}}</p>
 </li>
 </ul>
 </div>
</template>
<script>
 export default {
 data() {
 return {
 inpValue:'',
 }
 },
 computed: {
 goodsListHalv(){
 return this.$store.state.goodsList;
 }
 },
 methods: {
 // 注意这里使用箭头函数可能会报错
 // 同步商品价格减半;触发事件提交actions中的disCount()函数
 disCountPrice: function(){
 this.$store.dispatch('disCount')
 },
 // 异步商品价格减半
 disCountPriceAsync: function(){
 this.$store.dispatch('disCountAsync')
 },
 }
 }
</script>

page8.vue

<template>
 <div>
 <h2>我是第六个页面</h2>
 <div>
 <input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
 <button @click="acyionChangeName()">载荷修改商品的名字（字符串）</button>
 <button @click="acyionChangeNameAsync()">载荷修改商品的名字（对象）</button>
 </div>
 <ul class="ul_list">
 <li v-for="item in goodsListHalv" :key="item.id">
 <p class="name">商品：{{item.name}}</p>
 <p class="price">价格：￥{{item.price}}</p>
 </li>
 </ul>
 </div>
</template>
<script>
 export default {
 data() {
 return {
 inpValue:'',
 }
 },
 computed: {
 goodsListHalv(){
 return this.$store.state.goodsList;
 }
 },
 methods: {
 // 注意这里使用箭头函数可能会报错
 // 同步修改商品的名字;触发事件提交actions中的acyionChangeName()函数
 acyionChangeName: function(){
 this.$store.dispatch('acyionChangeName',this.inpValue)
 },
 // 异步修改商品的名字;对象 对象中包含两个属性type事件函数，payload参数
 acyionChangeNameAsync: function(){
 this.$store.dispatch({
 type:'acyionChangeNameAsync',
 payload:this.inpValue
 })
 },
 }
 }
</script>

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作。

Actions 支持同样的载荷方式和对象方式进行分发。

效果图