Vuex：从动作中调用 getter

Posted 2023-02-16

【中文标题】Vuex：从动作中调用 getter

【英文标题】：Vuex: Call getters from action

【发布时间】：2019-02-02 13:27:02

【问题描述】：

有没有办法让调度/动作在其中调用 getter？

mutations: 
    setData(state, data) 
        state.data = data;
    

actions: 
    sendDataToServer( commit , payload) 
        // call getter (data) and assign to variable
        // do async functions from the data returned
    
,
getters: 
    getAppData: state => () => 
        return state.data;
    

那么这里的最佳做法是什么？使用突变来更改状态，然后获取状态并将其传递给将执行异步函数的操作，还是我需要重组我的实现？

调用突变 -> 通过 getter 获取数据 -> 调用操作

或

在动作上做所有事情（对动作进行突变并在不需要 getter 的情况下执行动作/异步方法）？

【问题讨论】：

除了提交之外，动作还有默认注入参数dispatch、getters和rootGetters。所以你可以简单地写； sendDataToServer( commit, getters , payload) 访问 getter。

@Tugayİlik 你应该回答，这样我们才能投票。

【参考方案1】：

动作处理程序接收一个上下文对象，该对象在存储实例上公开相同的方法/属性集，因此您可以调用 context.commit 来提交突变，或通过 context.state 和 context.getters 访问状态和 getter

   actions: 
            sendDataToServer(context, payload) 
                // context object contains state, commit, getters
                context.getters.getAppData
            
        ,

参考文档：https://vuex.vuejs.org/guide/actions.html#dispatching-actions

【参考方案2】：

如果你在vuex中使用nuxt和隔离文件，像这样=

store -
      |
      |-- index.js
      |
      |-- store.js
      |
      |-- product.js

// store.js
export const getters = 
  getNameStore: state => state.getNameStore ? state.getNameStore : null
;

我希望将store.js 的getNameStore 转换为product.js

// product.js
export const actions = 
  setResultSearch( commit, dispatch , text) 
    console.log(
      'getNameStore',
      this.getters["store/getNameStore"]
  );
;

this.getters["store/getNameStore"]

【参考方案3】：

您可以在操作中访问getters：

getters: 
   getUser(state)
      return state.user
   


actions : 
    myAction( getters )
       let user = getters.getUser
    

【参考方案4】：

除了提交之外，动作还有默认注入参数dispatch、getters 和rootGetters。所以你可以简单地写；

sendDataToServer( commit, getters , payload) 访问 getter。

【参考方案5】：

在操作中，您会看到第一个参数包含commit。同样，您可以传递commit, state。这样，您可以直接访问 state.data。

我认为在您的示例中，您会想要执行该操作，因为您可以使用 commit('setData') 从内部操作本身调用突变。

第一个参数是供您根据需要使用状态和突变。就我个人而言，我只参与过先执行操作并进行突变以将其存储在应用程序中的项目。例如，如果我想在某处的服务器中存储汽车信息，首先我会执行该操作（并将其保存到远程数据库）。一旦我确认它保存在数据库中，我就会在商店中进行本地变异。这完全取决于具体情况。但好在你可以从动作内部变异

【讨论】：

实际上可以做更多的突变，不仅setData，我也想更新数据例如。在插入时，我将调用 setData 或在更新时调用 updateData，实际上我的操作是将数据发送到服务器只是为了更新服务器的数据（数据还包括一个 jwt 令牌），然后它将检查是否令牌有效，如果令牌无效，则将用户重定向回第一个插入过程并重复该过程。所以实际上是相反的，async 方法在突变之前先出现。你怎么看？

上述场景的最佳流程是什么？

看起来你是先与服务器打交道。所以，如果我理解正确，异步调用 API -> 如果成功，提交设置/更新。如果没有，请进行另一个 API 调用并从头开始执行相同的步骤。

是的，先生，这是正确的。我实际上得到了我需要的东西，这来自您的解决方案，即在提交 commit, state 之后添加一个状态。谢谢！