Vuex:从行动中召集吸气者

时间:2018-08-28 01:38:11

标签: javascript ecmascript-6 vuejs2 vuex

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

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获取数据->通话操作

OR

在动作上完成所有操作(在不需要吸气剂的情况下对动作进行更改并执行动作/异步方法)?

5 个答案:

答案 0 :(得分:14)

您可以在操作中访问getters

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

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

答案 1 :(得分:5)

除了提交外,操作还具有默认注入的参数,分别为names_clusters_20 # Expecting 3 clusters, finds 3 >>> {'a': 1, 'b': 3, 'c': 2, 'd': 1} names_clusters_50 # Expecting 2 clusters, finds 3 >>> {'a': 1, 'b': 3, 'c': 2, 'd': 1} names_clusters_100 # Expecting 2 clusters, finds 2 >>> {'a': 1, 'b': 2, 'c': 1, 'd': 1} dispatchgetters。因此,您可以简单地编写;

rootGetters访问吸气剂。

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:1)

如果您在vuex中使用nuxt和隔离文件,例如=

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

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

我希望将getNameStore中的store.js放入product.js

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

this.getters["store/getNameStore"]

答案 4 :(得分:0)

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

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

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