Vuex 돌연변이 반환이 마지막으로 삽입됨

Vuex 돌연변이 반환이 마지막으로 삽입됨

나는 돌연변이의 가치를 행동으로 되돌리고 싶다.이 경우 마지막으로 삽입한 개체를 선택하십시오.

내 돌연변이에, 잘 해.

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를 반환할 방법이 있는가?내 부품으로 배출하려면...

고마워요.

돌연변이는 값을 반환하지 않는다.

그리고, 논평에서 언급했듯이, 최선의 방법은 그러한 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));

그러면 돌연변이가 바로 끝나고 콜백 실행이 나중에 이벤트 루프의 대기열로 전송될 겁니다.

동작에 전달하여 상태 데이터에 액세스할 수 있음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
    });
  },
},

참조URL: https://stackoverflow.com/questions/49389172/vuex-mutation-return-last-inserted