Question

我正在使用Vue和VueX进行项目。在我的组件中，我有一个如下所示的计算方法：

...mapState([
  'watches',
]),

isWatched() {
  console.log('check watch');
  if (!this.watches) return false;
  console.log('iw', this.watches[this.event.id]);
  return this.watches[this.event.id] === true;
},

在我的商店中，我有以下物品：

addWatch(state, event) {
  console.log('add', state.watches);
  state.watches = {
    ...state.watches,
    [event]: true,
  };
  console.log('add2', state.watches);
},

但是，这不会触发重新计算。发生了什么事？

Answer 1

尝试更改return this.watches[this.event.id] === true;

到

return this.$store.commit("addWatch", this.event.id);

Answer 2

您显示的代码正确，因此问题必须存在于其他地方。

我假设“计算方法”是指计算属性。
计算的属性不会深入监视其依赖性，但是您将不可变地更新存储，因此这不是问题。

这里有一些示例代码可以为您提供完整的图片。
添加事件编号，直到您点击“ 2”，然后isWatched属性变为true。

Vue.use(Vuex);
const mapState = Vuex.mapState;

const store = new Vuex.Store({
  state: {
    watches: {}
  },
  mutations: {
    addWatch(state, event) {
      state.watches = { ...state.watches, [event]: true };
    }
  }
});

new Vue({
  el: "#app",
  store,
  data: {
    numberInput: 0,
    event: { id: 2 }
  },
  methods: {
    addNumber(numberInput) {
      this.$store.commit("addWatch", Number(numberInput));
    }
  },
  computed: {
    ...mapState(["watches"]),
    isWatched() {
      if (!this.watches) return false;
      return this.watches[this.event.id] === true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>Watches: {{ watches }}</div>
  <div>isWatched: {{ isWatched }}</div>
  <br>
  <input v-model="numberInput" type="number" />
  <button @click="addNumber(numberInput)">
   Add new event
  </button>
</div>

如何在Vue应用中触发重新计算？

2 个答案: