Question

我想将一个值从突变返回到action。在这种情况下，我想要最后插入的对象：

在我的突变中，工作正常：

mutations: {
  insert(state, item) {
    const guid = Math.floor(Math.random() * 6) + 1; // any sense, just example
    item.guid = guid;
    state.data.push(item);
    return guid;
  },
},

在我的行动中，为通话工作正常，而不是为了回报：

actions: {
  insert ({ commit }, data) {
    return new Promise((resolve) => {
      const guid = commit('insert', event);
      resolve(guid); // resolve undefined
    });
  },
},

有一种方法可以退回guid？我需要它用我的组件后发出...

由于

Answer 1

Mutations (commits) don't return values

并且，正如评论中所提到的，最佳做法是将此类GUID 生成计算留给操作，并且只是提交突变中的状态。

话虽这么说，你可以发送一个回调来调用它。只需确保回调代码简单且同步（如果没有，请参见下文）。

＆＃13;

const store = new Vuex.Store({
strict: true,
  state: {
    data: []
  },
  mutations: {
    insert(state, {item, callback}) {
      const guid = Math.floor(Math.random() * 600) + 1; // any sense, just example
      item.guid = guid;
      state.data.push(item);
      callback(guid);
    },
  },
  actions: {
    insert ({ commit }, data) {
      return new Promise((resolve) => {
        commit('insert', {item: data, callback: resolve});
      });
    },
  },
});

new Vue({
  store,
  el: '#app',
  data: { insertedGuid: 'click button below' },
  methods: {
  	go: async function() {
      const guid = await this.$store.dispatch('insert', {name: "Alice"});
      this.insertedGuid = guid;
	  }
	},
  computed: {
    datadata: function() {
      return this.$store.state.data
    }
  },
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>store's data: {{ datadata }}</p>
  <p>insertedGuid: {{ insertedGuid }}</p>
  <button @click="go">Click to Insert</button>
</div>

＆＃13;

如果您不知道回调可能是什么，我建议您将其包装为

setTimeout(() => callback(guid));

哪个会立即结束变异，然后在事件循环的队列中发送回调执行。

Answer 2

您可以通过将状态数据传递到操作insert ({ commit, state }, data) { ...

来访问状态数据

示例：

actions: {
  insert ({ commit, state }, data) {
    return new Promise((resolve) => {
      commit('insert', event);
      const guid = state.data[state.data.length].guid
      resolve(guid); // resolve undefined
    });
  },
},

Vuex Mutation返回最后插入

2 个答案: