Vuex 突变 return 最后插入

Question

我想 return 从变异到行动的价值。在这种情况下，我想要最后插入的对象：

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

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;
  },
},

在我的行动中，电话工作正常，而不是 return :

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

有办法 return guid 吗？我需要它在我的组件之后发出...

谢谢

Answer 1

您可以通过将状态数据传递到操作中来访问状态数据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
    });
  },
},

Answer 2

Mutations (commits) don't return values.

并且，如评论中所述，最佳做法是将此类 GUID generation 计算留给一个操作，然后真正 commit突变中的状态。

也就是说，您可以向突变发送回调并调用它。只要确保回调代码简单且同步即可（如果不是，请参见下文）。

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
    }
  },
})

<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>

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

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

这会立即结束突变，稍后将回调执行发送到事件循环的队列中。

Vuex 突变 return 最后插入

Vuex Mutation return last inserted

vuejs2

vuex