练习vuex:踩坑——初始值设为0

 watch: {
    actualTransfer: {
      handler(n) {
        if (n || n === 0) {
          console.log(n, "qqqqqqqqq");
          // this.option.series[0].data[0][1] = this.actualTransfer;
          this.$set(this.option.series[0].data[0], 1, this.actualTransfer);
          console.log(this.option.series[0].data[0][1], "22222");
        }
      },
      deep: true,
      immediate: true,
    },
    notTransfer: {
      handler(n, o) {
        if (n || n === 0) {
          console.log(n, "wwwwwwwwwwwwwwwwwww");
          // this.option.series[0].data[1][1] = this.notTransfer;
          this.$set(this.option.series[0].data[1], 1, this.notTransfer);
          console.log(this.option.series[0].data[1][1], "111111");
          this.$nextTick(() => {
            this.init();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    actualTransfer() {//0
      return this.$store.state.fundsData.actualTransfer;
    },
    notTransfer() {
      return this.$store.state.fundsData.notTransfer;
    },
  },
  methods: {
    async initData() {
      let result = await requestApi.maintenanceFunds();
      if (result.data.data.code === 0) {
        var data = result.data.data.data;
        this.$store.commit(
          "fundsData/setActualTransfer",
          Number((Number(data.publicFixFundCircle.data[0][1]) / 10000).toFixed(2))
        );
        this.$store.commit(
          "fundsData/setNotTransfer",
          Number((Number(data.publicFixFundCircle.data[1][1]) / 10000).toFixed(2))
        );
        console.log(
          this.$store.state.fundsData.actualTransfer,
          this.$store.state.fundsData.notTransfer,
          "datadata"
        );

        /* this.$store.commit(
          "fundsData/setRealTransfer",
          Number(
            (Number(data.houseSalePriceTransferCircle.data[0][1]) / 10000).toFixed(2)
          )
        );
        this.$store.commit(
          "fundsData/setShouldTransfer",
          Number(
            (Number(data.houseSalePriceTransferCircle.data[1][1]) / 10000).toFixed(2)
          )
        ); */

        /* console.log(this.$store.state.fundsData.shouldTransfer,this.$store.state.fundsData.realTransfer,"nnnnnnnnn"); */
      }
    },

以上是更改后的代码（正确的）
datadata：是本页面请求完接口打印的store（正确）
store中初始值为 ‘ ’

以上两张图片是store中初始值为0的情况下
computed第一次会从store中获取值==0，且被watch监听到，此时接口还未请求完数据，均是默认值0，notTransfer中，n=0会执行代码，init方法会被执行
当请求完接口后，watch再一次监听到，但notTransfer中的new值就是0，不会执行，也不会重新init

将vuex中的初始值设为“”！！！

如果将其设为默认值，则会在第一次computer中和watch中执行，当请求到数据后，再次更新watch，会屏闪

vuex的持久化存储

import db from "@/utils/localstorage";

export default {
  namespaced: true,
  state: {
    // ids: ""
    ids: db.get("relatedIds")
  },
  mutations: {
    // 当第一次出发更新时,执行了save,但是state.ids是从state.ids = val;取得值,而不是loaclStroage
    setIds(state, val) {
      state.ids = val;
      db.save("relatedIds", val);
    }
  }
};

JSON.parse(localStorage.getItem(projectName + “_” + key)) 得到的值的类型应该与存入时候的值的类型相同，因为它是将存储在本地存储中的 JSON 字符串解析为 JavaScript 对象。如果存入时的值是一个 JavaScript 对象，则解析后得到的值也应该是一个 JavaScript 对象。但是如果存入时的值是一个字符串、数字或布尔值等基本数据类型，则解析后得到的值也应该是相应的基本数据类型。