欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue核心概念Action的总结

程序员文章站 2022-06-30 10:04:00
action 类似于mutation,不同在于: - action 提交的是mutation,而不是直接变更状态。 - action 可以包含任意异步操作。 acti...

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 支持同样的载荷方式和对象方式进行分发。

效果图

Vue核心概念Action的总结

代码执行过程:

上面的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 都支持载荷方式和对象方式进行分发。

总结

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