VueX 等待突变执行

Posted 2023-02-22

【中文标题】VueX 等待突变执行

【英文标题】：VueX wait for mutation to execute

【发布时间】：2020-08-12 09:31:08

【问题描述】：

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

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

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

【参考方案1】：

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

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

【讨论】：

这是一个有趣的选项，但这里的问题是突变有时会在组件安装之前执行。在那种情况下，它基本上永远不会初始化。一种可能性是在商店中设置一个标志以供观察和检查。也许状态值本身可以通过将其映射到计算值来观察？也许父组件应该调解并传递一个 prop 指示子组件是否应该在兄弟组件发出某种偶数之后初始化。虽然在我看来，重新考虑这个东西的设置方式是最好的选择。

没错，我的组件中很少有东西被“初始化”。当某件事依赖于发生的突变时，它通常会成为一个计算属性，该属性源自状态中突变的任何变化。

【参考方案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();
    

【参考方案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.
    

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

【讨论】：

他们询问是否等待另一个组件提交的突变完成。如果您只想修改状态，也没有理由使用操作 - 突变就足够了。我很确定在没有异步代码的同步函数上使用 await 也几乎没有效果。所以这本质上与提交突变相同，但您已将其包装在另一个函数中。