Vue核心概念Action的总结

  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)
    }
  }

<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>

<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>