Vuex Mutation return last inserted - vuejs2

Question

I want to return a value from mutation to action.
I this case, I want the last inserted object :
In my mutation, work fine :
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;
},
},
In my action, work fine for the call, not for the return :
actions: {
insert ({ commit }, data) {
return new Promise((resolve) => {
const guid = commit('insert', event);
resolve(guid); // resolve undefined
});
},
},
There is a way to return the guid ?
I need it to emit after with my component...
Thanks

Answer 1

Mutations (commits) don't return values.
And, as mentioned in comments, the best practice is to leave such GUID generation computation to an action and just really commit the state in the mutation.
That being said, you cand send a callback to the mutation and call it. Just make sure the callback code is simple and synchronous (if not, see below).
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>
If you have no idea of what the callback could be, I suggest you wrap it as
setTimeout(() => callback(guid));
Which would end the mutation right away and send the callback execution later down the queue of the event loop.

Answer 2

you can access the state data by passing it into the action insert ({ commit, state }, data) { ...
example:
actions: {
insert ({ commit, state }, data) {
return new Promise((resolve) => {
commit('insert', event);
const guid = state.data[state.data.length].guid
resolve(guid); // resolve undefined
});
},
},