Question

我有一个组件来更新Vuex中的状态，我可以通过vue开发工具看到vuex状态已更改，但是当我尝试通过绑定到Vuex上的mapGetters或mapState的观察程序执行某些逻辑时，状态会发生变化根本不起作用。 vuex中的代码：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    companyDetails: {},
    //date: "",
    showSearchForm: false,   
    consumptionData: {
      dateTo: new Date(),
      dateFrom: new Date(new Date().setDate(new Date().getDate() - 7))
    }
  },
  getters: {
    getConsumptionData(state) {
      return state.consumptionData;
    }   
  },.....

通过MapState或MapGetters注释的代码从Vuex获取数据的观察者和计算属性上的代码意味着我尝试了所有这些选项

  computed: {
    // need to ask about reactiveness
    // ...mapGetters({
    //   consumptionDataVuex: "getConsumptionData"
    // })
    //  ...mapState({
    //  consumptionDataVuex: "ConsumptionData"
    //  })    
    consumptionDataVuex () {
      return this.$store.getters.getConsumptionData;
    }
  },
    watch: {
    consumptionDataVuex() {
      console.log("changed");
      this.getConsumption();
    }
  },.....

唯一从vuex同步获取数据的代码是

  created() {
    //console.log(this.parentData);
this.$store.watch(
  (state)=>{
    return this.$store.state.consumptionData // could also put a Getter here
  },
  (newValue, oldValue)=>{
    //something changed do something
    console.log(oldValue)
    console.log(newValue)
    this.getConsumption();
  },
//Optional Deep if you need it
    {
      deep:true
    }
  )
  },

因此，我不明白为什么上面的代码无法从状态中获取更新，而创建的Hook中的代码却可以获取状态更新？互联网上的许多例子确实证明它应该工作

Answer 1

尝试更换手表

    watch: {
        consumptionDataVuex: {
            handler () {
              console.log("changed");
              this.getConsumption();
            },
            deep: true
        }
    }

Vue Watcher和Vuex无法正常工作

1 个答案: