context.commit

[heiheshang]

how to do context.commit ? I used to call my method, what should I do now?

[maoberlehner]

I have no idea what you’re talking about.
See https://github.com/maoberlehner/vuex-map-fields/blob/master/CONTRIBUTING.md#reporting-issues for information how to write a proper issue. Thanks!

[heiheshang]

if I use updateField, then which method should I call in context.commit. I have an item field, what will be the name of the method that is generated automatically?

[maoberlehner]

Still no idea what you're talking about. What is context.commit?
Please see https://github.com/maoberlehner/vuex-map-fields/blob/master/CONTRIBUTING.md#reporting-issues for information how to write a proper issue. Thanks!

Provide a reduced test case or a live example.

[heiheshang]

`const state = {
items: []
}

const getters = {
getField
}

const mutations = {
updateField
}

const actions = {
ITEMS: async (context, payload) => {
context.commit('SET_LOADING', true)
await axios.post('/api/model/amiro/post/list', {
queryid: uuid.list
})
.then(data => {
if (data.data.status === 'ok') {
//????
context.commit('items', data.data.result)
}
})
.catch(error => {
context.commit('SET_TEXTERROR', error)
context.commit('SET_LOADING', false)
})
},
`

[maoberlehner]

Create you own mutation for setting items.
In theory you can (ab)use the mutation created by vuex-map-fields but I advice against doing this.

[geoidesic]

@heiheshang have the comments here solved your issue?

[aberbenni]

@maoberlehner Why do you advise against using mutations generated by vuex-map-fields inside actions?

In my case, I solved it like this:

mutations: {
   updateField,
   setItems(state, payload) {
      state.items = payload;
   },
}

but it seems to me useless and repetitive code since in practice setItems already exists, with another name, eg:

commit("updateField", { path: "items", value: data.data.result });

equals to:

commit("setItems", data.data.result);

[geoidesic]

@aberbenni and @heiheshang The point of this library is that you don't manually call the mutations. Instead the mutations are written as setters on the aliased property in the vm root scope. So you simply set the value for that alias and the mutation is called automatically.

So for example:

computed:{
    ...mapFields('myVuexStoreModule', ['my.path.in.the.vuex.store.to.my.data.node'])

This will create an alias vm.node (i.e. this.node), then in order to call the updateField mutation you can just do this.node = 'someValue'. There's no need to manually call the mutation. It's not clear why you would be trying to call the updateField mutation from within a vuex action, as this library isn't designed for that... it's designed as a way of writing less boilerplate in your component computed property.

[aberbenni]

I try to better clarify what I'm doing, my use case is about actions where I run asynchronous code by calling external APIs with axios and then saving fetched data in my Vuex store.

To do this, you need to commit mutations in an action, as reported here: https://vuex.vuejs.org/guide/actions.html
"Instead of mutating the state, actions commit mutations".

Here is my code:

callSomeApiAction = async (
  { commit, dispatch, state },
  payload
) => {
  try {
    dispatch("setLoadingState");
    
    //async code
    
    ...

    //store values fetched from api
    commit("updateField", {
      path: "items",
      value: data.data.result,
    });

    // Reset the loading state
    dispatch("resetLoadingState");
  } catch (error) {
    dispatch("setErrorState", error);
  } finally {
    ...
  }
};

So how can I commit? Should I use updateField or create an ad hoc mutation setItems?
...mapFields is not available in actions (which in my case are in an external file).

In order to write less boilerplate code I would prefer to use updateField inside actions instead of create redundant mutations like setItems.