Question

我有一个Web应用程序，该应用程序在App.Vue中具有多个组件，但一次只能显示一个组件，并且我在Store中跟踪变量“ Step”。像这样：

<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”的状态，当它到达某个特定步骤时，我想在实际组件中运行的任何代码之前调用特定突变。我曾考虑在App.vue文件中使用watch属性，但从我在网上阅读的上下文来看，使用这样的观察器似乎不是一个好主意。

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” 操作，而无需执行其他任何操作。

如何称呼状态变化为突变

1 个答案: