Vuex：从动作中调用 getter

Question

有没有办法让调度/动作在其中调用 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 的情况下执行动作/异步方法）？

Answer 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

Answer 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"]

Answer 3

您可以在操作中访问getters：

getters: {
   getUser(state){
      return state.user
   }
}

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

Answer 4

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

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

Answer 5

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

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

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