如何在国家变化上调用突变

Question

我有一个Web应用程序，该应用程序在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>

我不确定哪种最佳实践是可以观察"步骤"的状态，并且当它达到一定步骤时，我想在实际组件内运行的任何代码之前调用某个突变。我正在考虑在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" 动作而无需做其他任何事情。