Vue.js 直接在模板中使用/修改vuex状态

我想我对vue+vuex的工作有误解

考虑到以下场景

我有一个vuex状态，其中包含列表的筛选器。中的每个筛选器项都可以标记为选中。但是-只有在单击“应用”按钮时，才应通过修改器修改vuex状态，以便其他组件可以对更改做出反应。例如，列表将根据选定的过滤器重新加载数据。当状态更新时，应更新组件

我创造了一支钢笔

Vue.component（'filter-item'{
模板：`
{{item.color}（{{isSelected}}）切换
`,
数据：函数（）{
返回{
isSelected:this.item.selected
}
},
计算：{
/*isSelected:函数（）{
返回此.item.selected；
}*/
},
道具：['item']
});   

我遇到了不同的问题

当我直接在“筛选项目”模板中切换“选定”属性时，vuex状态也会更新

因此，我尝试用状态初始化数据属性。现在只有数据变量“isSelected”将被更新。当我按下“apply”（应用）按钮时，vuex状态将被更新（稍后我将使用变异）。到目前为止，一切正常。但现在，“isSelected”属性不会在状态更改时自动更新

如果我使用计算属性，“isSelected”不能在单击事件中更改

归档给定场景的正确方法是什么

非常感谢！

更新的代码笔：

我以前遇到过这种情况，发现在存储区中的“实际”变量旁边添加一个“临时”变量最简单。“实际”变量是

selected

，“临时”变量是

tempSelected

.

tempSelected

将在用户切换颜色时更新，而

selected

将在您“应用于存储”时更新

以下是默认的存储状态

filter: [
      {
        color: 'red',
        selected: false,
        tempSelected: false,
      },
      {
        color: 'green',
        selected: false,
        tempSelected: false,
      }      
    ]

以下是如何通过变异切换单一颜色。您不应通过引用直接更新存储，而应始终通过变异进行更新。如果您对计算的get/set语法感到困惑，请查看以下内容：

现在有了存储用户输入的临时变量。要“应用到存储”，只需将实际变量的值设置为临时变量的值

updateFilters(state){
      state.updates++;
      state.filter.forEach(filter=>{
          filter.selected = filter.tempSelected
      })
    },

要切换所有值，只需翻转当前选定的

值。但请确保保持
tempSelected
变量同步

toggleFilters(state){
      state.updates++;
      state.filter.forEach(filter=>{
          filter.selected = !filter.selected
          filter.tempSelected = filter.selected
      })
    },

现在实现“取消更改”变得很简单功能。如果用户希望撤消其所有更改，可以将
tempSelected
设置为
selected
的值，有效地将状态恢复到最后一个已知值。
1）例如，可以将computed属性添加到filter item并监视此属性。因此，filter item组件将知道vuex是否已更改，并更改e.选定财产：

data: function () {
  return {
    isSelected: this.$store.state.filter[this.index].selected
  }
},
computed: {
  storeSelected: function(){
    return this.$store.state.filter[this.index].selected;
  },
  color: function(){
    return this.$store.state.filter[this.index].color;
  }
},
watch: {
  storeSelected: function(){
    this.isSelected = this.$store.state.filter[this.index].selected;
  }
},
props: ['index']

代码笔：

(二)

在Vuex存储中实际更改状态的唯一方法是提交一个突变

所以，如果您使用变异来更改vuex状态-您可以在过滤器项组件中订阅变异，例如，在安装组件后：

mounted: function(){
  this.$store.subscribe((mutation, state) => {
     if(mutation === 'changeFilterItem'){
       this.isSelected = state.filter[this.index].selected;
     }
  })
 },

codepen：（注释代码）
你能提供一个或多个示例吗？当然，我编辑了这篇文章。谢谢。
toggleFilters(state){
      state.updates++;
      state.filter.forEach(filter=>{
          filter.selected = !filter.selected
          filter.tempSelected = filter.selected
      })
    },

data: function () {
  return {
    isSelected: this.$store.state.filter[this.index].selected
  }
},
computed: {
  storeSelected: function(){
    return this.$store.state.filter[this.index].selected;
  },
  color: function(){
    return this.$store.state.filter[this.index].color;
  }
},
watch: {
  storeSelected: function(){
    this.isSelected = this.$store.state.filter[this.index].selected;
  }
},
props: ['index']

mounted: function(){
  this.$store.subscribe((mutation, state) => {
     if(mutation === 'changeFilterItem'){
       this.isSelected = state.filter[this.index].selected;
     }
  })
 },