从组件访问 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
  });

我想把每一个10岁以下的article.position改成article.position = +'0'article.position。

我试过了：

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

我知道这不是一个好方法，但这就是我所拥有的。有小费吗？ :)

Answer 1

您应该通过mutation 或action 将所有 Vuex 状态更改代码放入 Vuex 存储本身。突变用于将更新所有反应组件的同步数据更改。操作用于异步事件，例如将状态更改持久化到服务器。

因此，当发生更改时，它应该调用组件上的一个方法，该方法应该反过来调用 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. */
  }
}