VueX 等待突变执行

Question

是否可以在 VueX 中使 mounted() 中的方法等到其他组件中的某些突变被执行？

因为有时突变是在之前执行的，有时是在之后执行的，所以我会知道在安装组件时是否可以在它运行之后等待：

  mounted() {
    // await MutationName
    this.columnItemsInit();
  }

Answer 1

您可以使用store.subscribe 方法订阅突变

mounted() {
  let unsubscribe = null
  unsubscribe = this.$store.subscribe(({ type }) => {
    if (type === 'MutationName') {
      this.columnItemsInit()
      unsubscribe() // So it only reacts once.
    }
  })
}

Answer 2

除非组件以某种方式相关（父与子），否则可能会很棘手。您可以在最终组件的计算属性中添加一个观察器，该观察器查看存储中的值（例如名为“alpha”），一旦第一个组件完成其功能，就可以更新该值。 所以

组件 1

mounted() {
    // Run function then update state value "alpha" in store to say I am complete
}

组件 2

computed {
    valueInStore() {
        // return state value "alpha"
    }
},

watch: {
    valueInStore(value) {
        // If value "alpha" is complete run the following code
        this.columnItemsInit();
    }
}

Answer 3

正确的做法是使用 vuex 动作。 动作的本质是异步的，所以当你执行一个动作时，你可以为动作发生设置等待。

如documentation所述

动作类似于突变，不同之处在于：

• 动作不会改变状态，而是提交突变。
• 动作可以包含任意异步操作。

因此您可以在传递到下一个操作之前等待该操作正在执行。

举个例子：

const store = new Vuex.Store({
    state: {
        token: null
    },
    mutations: {
        SET_TOKEN (state, payload) {
          state.token = payload
        }
      },
      actions: {
        SET_TOKEN ({ context }, token) {
          context.commit('SET_TOKEN', token)
        }
      }
})

之后在你的方法/钩子中只是通过调度方法调用一个动作。

methods: {
    async refreshStoreValue() {
        await this.$store.dispatch('SET_TOKEN', token) //this will call an action declared in your store.
    }
}

您可以在异步方法声明中或在您的生命周期挂钩（创建、挂载等）中使用该语句。