Как вызвать мутацию при изменении состояния

Question

У меня есть веб-приложение, которое имеет несколько компонентов в App.Vue, но будет показывать по одному за раз, и я отслеживаю переменную «Шаг» в магазине. Так что-то вроде этого:

<div class="hero-body main-content-container">
  <Welcome id="intro" v-if="steps == 1"></Welcome>
  <template v-cloak>
    <Keywords id="keywords" v-if="steps == 2"></Keywords>
    <Ads v-if="steps == 3"></Ads>
  </template>
</div>

Я не уверен, что лучше всего делать так, чтобы я мог наблюдать за состоянием 'Step', и когда он достигает определенного шага, я хочу вызвать определенную мутацию перед любым кодом, который выполняется внутри фактического компонента. Я думал об использовании свойства watch в файле App.vue, но кажется, что использование наблюдателя не очень хорошая идея из контекста, который я прочитал в Интернете.

Answer 1

Я бы сохранил ваш Step в магазине и изменил бы его только через действия. Тогда вы полностью контролируете, что происходит и когда.

Например

const store = new Vuex.Store({
  state: {
    step: 1,
    // etc
  },
  mutations: {
    incrementStep (state) {
      if (state.step < MAX_STEPS) { // just a precaution
        state.step += 1
      }
    },
    // etc
  },
  actions: {
    nextStep ({ commit, state }) {
      commit('incrementStep')
      if (state.step === A_CERTAIN_STEP) {
        commit('certainMutation')
      }
    }
  }
})

Тогда ваши компоненты могут отправлять действие "nextStep" , не делая ничего другого.