actions: {
    // 商品半價(jià)
    disCount (content) {
      // actions中通過(guò)commit()提交mutations中的goodsPriceHalve()函數(shù)
      content.commit('goodsPriceHalve')
    },
    // 異步的商品半價(jià)
    /**
     * disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    } */
    disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    },
    // 統(tǒng)一修改商品名字
    /* acyionChangeName()的第一個(gè)參數(shù)可以理解成是一個(gè)對(duì)象，第二個(gè)參數(shù)為事件傳遞過(guò)來(lái)的參數(shù)
    這個(gè)參數(shù)也需要傳遞給mutations中相對(duì)應(yīng)的函數(shù)中*/
    acyionChangeName(content,payload){
      // 載荷形式
      content.commit('changeName',payload);
    },
    acyionChangeNameAsync (content,payload){
      setTimeout(() => {
        // 對(duì)象形式
        content.commit('changeName',payload.payload)
      },1000)
    }
  }

<template>
  <div>
    <h3>我是第五個(gè)頁(yè)面</h3>
    <div>
      <input type="text" placeholder="請(qǐng)輸入商品的新名字" v-model="inpValue">
      <button @click="disCountPrice()">同步商品價(jià)格減半</button>
      <button @click="disCountPriceAsync()">異步商品價(jià)格減半</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價(jià)格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意這里使用箭頭函數(shù)可能會(huì)報(bào)錯(cuò)
    // 同步商品價(jià)格減半;觸發(fā)事件提交actions中的disCount()函數(shù)
     disCountPrice: function(){
       this.$store.dispatch('disCount')
     },
     // 異步商品價(jià)格減半
     disCountPriceAsync: function(){
       this.$store.dispatch('disCountAsync')
     },
   }
  }
</script>

<template>
  <div>
    <h3>我是第六個(gè)頁(yè)面</h3>
    <div>
      <input type="text" placeholder="請(qǐng)輸入商品的新名字" v-model="inpValue">
      <button @click="acyionChangeName()">載荷修改商品的名字（字符串）</button>
      <button @click="acyionChangeNameAsync()">載荷修改商品的名字（對(duì)象）</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv" :key="item.id">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價(jià)格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意這里使用箭頭函數(shù)可能會(huì)報(bào)錯(cuò)
    // 同步修改商品的名字;觸發(fā)事件提交actions中的acyionChangeName()函數(shù)
     acyionChangeName: function(){
       this.$store.dispatch('acyionChangeName',this.inpValue)
     },
     // 異步修改商品的名字;對(duì)象 對(duì)象中包含兩個(gè)屬性type事件函數(shù)，payload參數(shù)
     acyionChangeNameAsync: function(){
       this.$store.dispatch({
         type:'acyionChangeNameAsync',
         payload:this.inpValue
       })
     },
   }
  }
</script>