vue.js - 无法在我的 Vue 组件中捕获 Vuex 状态变化

Question

我有一个 Vuex 商店，其中有一个可以正常工作的 getter，我可以看到状态的变化。但是，如果我将此 getter 称为组件中的计算属性，则它不起作用。值还是一样。

商店代码如下:

mutations: {
  UPDATE_SERVER_FILTERS(state, payload) {
    this._vm.$set(state, 'serverFilters', payload);
    //state.serverFilters = payload;  // Both patterns work
  },
  getters: {
    serverFilters(state) {
      return state.serverFilters;  // This works fine
    }
  }
}

组件代码:

computed: {
  serverFilters() {
    return this.$store.getters[this.storeName + '/serverFilters'];
  },
}

这是 JSFiddle 示例 https://jsfiddle.net/camo/je0gw9t3/4/效果很好。这是一个问题，因为在我的项目中它不起作用。我准备好死了...

我该如何解决？

Answer 1

在最底部:

new Vue({
  store,
  el: '#example',
  data() {
    return {};
  },
  computed: {},
  methods: {
    changeFilters() {
      this.$store.dispatch(this.storeName + '/updateFilters');
      //                   ^^^^^^^^^^^^^^ there is no storeName 
    },
  },
});

changeFilters 方法。您正在使用 this.storeName，但没有 this.storeName!就像子组件一样，将 storeName: 'a' 添加到 data() 然后它应该可以工作。

https://jsfiddle.net/4yfv3w87/

---

调试过程供大家引用:

首先打开Vue Devtools，切换到timeline标签。只需单击该按钮，您就会看到没有任何 Action 被触发。所以问题一定出在调度 Action 的人身上。然后您会注意到根组件没有 storeName。

所以不要 panic ，只要尝试跟踪代码即可。只需几分钟即可找出问题所在!