记录一次vuex的使用经验

      <ul class="nav_1" v-for="item in shopping" :key="item.productionId">

      </ul>

export default {
  data() {
    return {
      shopping: [],
    };
  },
  mounted() {
         // setTimeout(() => {
      this.shopping = this.$store.getters.getShopping;
      console.log("999", this.shopping);
      // }, 1000);

      console.log("getter", this.$store.getters.getShopping);
  },
  }

以上代码，将vuex中的数据赋给data中的元素，然后，v-for这个元素，一看页面没问题，一刷新，数据没了，我这里是做了vuex的数据永久存储（vuex-persistedstate），别的页面也没问题，应该是它获取数据时，vuex还没来得及去本地存储中获取数据，所以，此时我从vuex中获取到的可不就是个孔数组吗？

解决：使用计算属性，一旦vuex中数据改变，计算属性就会触发get，然后从新计算，我将其计算后的值，return出去，直接v-for遍历这个计算属性return出来的值。就OK了，代码如下

      <ul class="nav_1" v-for="item in getShopping" :key="item.productionId">
       
      </ul>

import { mapGetters } from "vuex";
export default {
  data() {
    return {
    };
  },

  computed: {
    getShopping() {
     return  this.$store.getters.getShopping;
 
    },
    ...mapGetters("seekDetails", ["addShoppingList"]),
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};