Vuex:从行动中召集吸气者

The*_*man 22 javascript ecmascript-6 vuex vuejs2

有没有一种方法可以让派遣/操作在其中调用吸气剂?

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

那么,这里的最佳实践是什么?使用变异来更改状态,然后获取状态并将其传递给动作,该动作将执行异步功能,还是我需要重组实现?

呼叫变异->通过getter获取数据->呼叫操作

要么

是否都在动作上做(在动作上做突变,并且不需要吸气剂就做动作/异步方法)?

Tug*_*lik 42

除了提交外,动作还具有默认注入的参数dispatchgettersrootGetters。因此,您可以简单地编写;

sendDataToServer({ commit, getters }, payload) 访问吸气剂。


Ahm*_*aki 30

您可以访问getters内部操作:

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

actions : {
    myAction({ getters }){
       let user = getters.getUser
    }
}
Run Code Online (Sandbox Code Playgroud)


小智 10

在操作中,您将看到第一个参数{commit}。同样,您可以通过{commit, state}。这样,您可以直接访问state.data。

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

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


Har*_* VA 9

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

   actions: {
            sendDataToServer(context, payload) {
                // context object contains state, commit, getters
                context.getters.getAppData
            }
        },
Run Code Online (Sandbox Code Playgroud)

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