vue watch监听Vuex中的数据

问题来源

1. 讲解购物车，把选择的商品放到Vuex中来管理（目的是关联所学习的知识点）
2. 选择具体的某个商品的时候，就需要判断所有的商品是否选中，如果全部选中则全选按钮的状态就需要改变
3. 需要监听store中的state数据

记录该案例，方便以后学习

案例

<template>
  <div class="shop-car-page">
    <mt-header title="购物车" style="background:#ff9900">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <div class="shopList" :key='index' v-for="(goodsObj, index) in $store.state.goodsList">
      <div class="shopStore">
        <div class="storeImg">
          <img
            src="data:image/png;base64,iVBOR"
          />
        </div>
        <span class="storeName">杭州保锐区仓</span>
      </div>
      <div class="shopItem">
        <div class="shopInput" @click="toggleChecked(goodsObj, index)" v-show="!isEdit">
          <img src="../assets/images/radio_hig.png" v-show='goodsObj.isChecked' />
          <img src="../assets/images/radio_nor.png" v-show='!goodsObj.isChecked'/>
        </div>
        <div class="shopImg">
          <!-- <img src="http://yd.msword.top/static/img/02.png" /> -->
          <img :src="goodsObj.img" />
        </div>
        <div class="shopDetails">
          <div class="goods-info">
            <div class="shopName">{{goodsObj.name}}</div>
            <div class="shopGrain">
              <span class="shopPrice">￥{{goodsObj.price}}</span>
            </div>
            <div class="shopCalc">
              <span class="calcDown" @click="numMinus(goodsObj, index)">-</span>
              <input type="text" class="calcNum" v-model="goodsObj.num" />
              <span class="calcUp" @click="numAdd(goodsObj, index)">+</span>
            </div>
          </div>
          <div class="shopDelBtn fr" v-show="isEdit" @click="deleteGoodsObj(index)">删除</div>
        </div>
      </div>
      <div style="clear: both;"></div>
    </div>

    <div class="controller-panel">
      <div class="selectAll" @click="toggleSelectAll">
        <div>
          <img src="../assets/images/radio_hig.png" v-if="isSelectAll"/>
          <img src="../assets/images/radio_nor.png" v-else/>
          <div>全选</div>
        </div>
      </div>
      <div class="editAll" @click="isEdit = !isEdit">
        <div>
          <img src="../assets/images/editor_hig.png" v-show='isEdit' />
          <img src="../assets/images/editor_nor.png" v-show='!isEdit'/>
        </div>
        <div>编辑</div>
      </div>
      <div class="totalPrice">
        <div>合计:{{allPrice}}</div>
        <div>(不含运费)</div>
      </div>
      <div class="buyBtn">去结算({{$store.state.goodsList.length}}件)</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // goodsList: [],
      // 是否全部选中商品
      isSelectAll: false,
      isEdit: false
    };
  },
  mounted() {},
  methods: {
    // 删除某项数据
    deleteGoodsObj: function (index) {
      this.$store.state.goodsList.splice(index, 1);
    },
    // 是否全部选中
    toggleSelectAll: function () {
      this.isSelectAll = !this.isSelectAll;
      for (var i = 0; i < this.$store.state.goodsList.length; i++) {
        var currentGoods = this.$store.state.goodsList[i];
        currentGoods.isChecked = this.isSelectAll;
      }
    },
    // 切换具体的商品是否选中
    toggleChecked: function (goodsObj, index) {
      goodsObj.isChecked = !goodsObj.isChecked;
    },
    // 减少商品的数量
    numMinus: function (goodsObj, index) {
      // goodsObj.num--;
      this.$store.state.goodsList[index].num--;
    },
    // 添加商品的数量
    numAdd: function (goodsObj, index) {
      goodsObj.num++;
    },
  },
  computed: {
    // 商品的总价
    allPrice: function () {
      var total = 0;
      for (var i = 0; i < this.$store.state.goodsList.length; i++) {
        var currentGoods = this.$store.state.goodsList[i];
        if (currentGoods.isChecked) {
          total = total + currentGoods.num * currentGoods.price
        }
      }
      return total;
    }
  },
  watch: {
    // 监听 store里面的数据
    "$store.state.goodsList": {
      deep: true,
      handler: function (newValue, oldValue) {
        // result为true，则表示是全部选中
        var result = true;
        for (var i = 0; i < this.$store.state.goodsList.length; i++) {
          var currentGoods = this.$store.state.goodsList[i];
          // 如果有一个商品没有被选中
          if (!currentGoods.isChecked) {
            result = false;
            break;
          }
        }
        if (result) {
          this.isSelectAll = true;
        } else {
          this.isSelectAll = false;
        }
      }
    }
  }
};

</script>

<style lang='scss' scoped>
... 省略样式
</style>

watch 中的key设置为"$store.state.goodsList"