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

从组件访问Vuex状态对象属性

1 个答案: