Как запустить пересчет в приложении Vue?

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

Код, который вы указали, правильный, поэтому проблема должна быть в другом месте.

Я предполагаю, что под "вычисленным методом" вы подразумеваете вычисляемое свойство.
Вычисляемые свойства не отслеживают свои зависимости глубоко, но вы постоянно обновляете хранилище, так что это не проблема.

Вот пример кода, чтобы дать вам полную картину.
Добавляйте номера событий, пока вы не нажмете «2», и свойство isWatched станет истинным.

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>

Answer 2

Попробуйте изменить return this.watches[this.event.id] === true;

на

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