mutations: {
    //商品價(jià)格減半；更改這個(gè)數(shù)據(jù)狀態(tài)必須將這個(gè)數(shù)據(jù)源state傳遞過來
    goodsPriceHalve: state => {
      let goodsPriceHalve = state.goodsList.map(currentValue => {
        return {
          name: currentValue.name,
          price: currentValue.price/2
        }
      })
      state.goodsList = goodsPriceHalve;
    }
  }

<template>
  <div>
    <h2>我是第三個(gè)頁面</h2>
    <!-- 直接在HTML標(biāo)簽中使用 -->
    <div>{{$store.state.goodsList}}</div>
    <br>
    <router-link to='/page6'>更改商品名字</router-link>
    <br>
    <button @click="handleGoodsHavle">商品價(jià)格減半</button>
    <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 {
      /*
      // mutations不能通過直接賦值的形式改變state的數(shù)據(jù)狀態(tài)
      goodsListHalv: this.$store.state.goodsList,
      */
      // goodsListHalv: []
    }
   },
   /*
  //  mutations不能通過鉤子函數(shù)的形式進(jìn)行賦值
   mounted(){
     this.goodsListHalv = this.$store.state.goodsList
  },
  */
  // 通過計(jì)算屬性的方式，是完美的
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
     handleGoodsHavle: function(){
       //這里只通過事件改變數(shù)據(jù)的狀態(tài)
        this.$store.commit('goodsPriceHalve')
     }
   }
  }
</script>

  // 通過組件上的事件，通過this.$store.commit('mutations中的函數(shù)','需要從組件上傳遞給 mutation中這個(gè)函數(shù)的參數(shù)')
  mutations: {
    // 統(tǒng)一修改商品的名稱；changeName(state,payload)參數(shù)1 state：數(shù)據(jù)源，參數(shù)2 payload：接收的參數(shù)
    changeName: (state,payload) => {
      var changeName = state.goodsList.map(currentValue => {
        return {
          name: payload,//接收參數(shù)
          price: currentValue.price/2
        }
      })
      state.goodsList = changeName;
    }
  }

<template>
  <div>
    <h2>我是第四個(gè)頁面</h2>
    <div>
      <input type="text" placeholder="請(qǐng)輸入商品的新名字" v-model="inpValue">
      <button @click="changeGoodsName()">商品價(jià)格減半</button>
    </div>
    <router-link to='/page7'>action</router-link>
    <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: {
    //  通過 click事件觸發(fā)methods中的函數(shù)，進(jìn)而改變store.js中數(shù)據(jù)的狀態(tài)
     changeGoodsName: function(){
        // this.$store.commit('需要操作mutations中的函數(shù)名','從這個(gè)組件傳遞給第一個(gè)參數(shù)的參數(shù)')
        this.$store.commit('changeName',this.inpValue)
     }
   }
  }
</script>

state.obj = { ...state.obj, newProp: 123 }