vuejs2 - Vuex Mutation 返回最后插入的内容

Question

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

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

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 生成计算留给操作，并真正提交突变中的状态。

话虽如此，您可以向突变发送回调并调用它。只需确保回调代码简单且同步(如果不是，请参见下文)。

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

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