[Vuejs]-Accessing Vuex state object property from component

by

0👍

You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.

So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.

You don’t give your full code, but here is a hypothetical example:

(Edited to reflect question about accessing data from within the mutation method.)

Template:

<input type="text" name="position" :value="article.position" @input="updatePosition">

Method on Component:

methods: {
  updatePosition(e) {
     this.$store.commit('changeArticleOrder', article.position, e.target.value)
  }
}

Mutation on Vuex Store:

mutations: {
  changeArticleOrder(state, oldPosition, newPosition) {
    for (var i = 0; i < 10; i++) {
      state.articles[i].position = i + 1;
      /* Or do whatever it is you want to do with your positioning. */
  }
}
👤Blunt Jackson

Leave a comment