Доступ к свойству объекта состояния Vuex из компонента

Question

Я пытаюсь изменить значение свойства объекта состояния из компонента, но не могу найти правильный способ сделать это

Вот мое состояние:

state: {
  articles: [ {
     title: "Lorem ipsum",
     position: 7
   }, {
     title: "Lorem ipsum",
     position: 8
   }
 ]
} 

В вычисляемом свойстве компонента:

return this.$store.state.articles.filter((article) => {   
  return (article.title).match(this.search); /// just a search field,      don't mind it
  });

Я хотел бы изменить каждые article.position до 10 на article.position = +'0'article.position.

Я пытался:

let articlesList = this.$store.state.articles
if(articlesList.position < 10) {
  articlesList.position = +'0'articlesList.position
}

Я знаю, что это не очень хороший способ сделать это, но это все, что у меня есть. Какие-нибудь советы? :)

Answer 1

Вы должны поместить весь код изменения состояния Vuex в само хранилище Vuex через mutation или action. Мутации предназначены для синхронных изменений данных, которые обновят все реактивные компоненты. Действия предназначены для асинхронных событий, таких как сохранение изменений состояния на сервере.

Итак, когда происходит изменение, он должен вызвать метод вашего компонента, который, в свою очередь, должен вызвать соответствующую мутацию или действие в хранилище Vuex.

Вы не даете свой полный код, но вот гипотетический пример:

( Отредактировано с учетом вопроса о доступе к данным из метода мутации. )

Шаблон:

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

Метод по компоненту:

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

Мутация в магазине Vuex:

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. */
  }
}