Vuex - expose mutations only to actions

Question

I would like to use Vuex to store state about my client-server communication, e.g. a search logic:

// status is either synching|synched|error
state: { query:"", result:[], status:"synching" }

I implement the search action. Actions can only modify state through mutations:

function search(context, query) {
    context.commit("query", query);
    context.commit("status", "synching");

    // some asynch logic here
    ...
        context.commit("result", result);
        context.commit("status", "synched");
    ...
}

However, now the mutations are exposed to my components as well, they are now able to make my state inconsistent. Is it possible to hide mutations from components?

Unknown Unknown · Accepted Answer · 2017-11-01T10:48:08

Actions can directly change state. There is no need to create anything else, that can be used wrong way later. Just use actions directly.

var store = new Vuex({
  state: {
    something: ''
  },
  actions: {
    async updateSomethingAsynchronnousWay ({state}, payload) {
      var response = await axios.get(payload.src)
      state.something = response.data.anyKey
    }
  }
})

new Vue({
  store
  el: '#app',
  created () {
    this.$store.dispatch({
      type: 'updateSomethingAsynchronnousWay,
      src: 'https//your.rest.api/something'
    })
  }
})

Vuex - expose mutations only to actions

1 Answers