vue.js - 直接在模板中使用/修改 Vuex 状态

Question

我想我对 Vue + Vuex 有误解。

我有一个 Vuex 状态，其中包含一个列表过滤器。列表中的每个筛选项都可以标记为选中。但是 - Vuex 状态只能在单击应用按钮时通过修饰符进行修改，以便其他组件可以对更改使用react。

例如，列表会根据所选过滤器重新加载数据。当状态更新时，组件也应该更新。

我创建了一个 CodePen:

https://codepen.io/anon/pen/OzEJWP?editors=1010

https://jsfiddle.net/rxqu7ame/

Vue.component('filter-item', {
    template: ` <div>
            <!--{{item.color}} ({{item.selected}}) <button @click="item.selected = !item.selected">toggle</button>-->
            {{item.color}} ({{isSelected}}) <button @click="isSelected = !isSelected">toggle</button>
          </div>`,
    data: function () {
        return {
            isSelected: this.item.selected
        }
    },
    computed: {
        /*isSelected : function(){
          return this.item.selected;
        }*/
    },

    props: ['item']
});  

我遇到了不同的问题:

1. 当我直接在 filter-item 模板中切换 selected 属性时，Vuex 状态也会更新(这是我不想要的)。

2. 所以我尝试用状态初始化一个数据属性(组件的本地属性)，这样只有数据变量 isSelected 会被更新。当我按下“应用”按钮时，Vuex 状态将被更新(稍后我会使用突变)。到目前为止，一切都很好。但是现在，isSelected 属性不会在状态更改时自动更新。

3. 如果我使用计算属性，则无法在点击事件中更改 isSelected(因为它是只读的)。

实现我想要的场景的正确方法是什么？

Answer 1

1) 例如，您可以将计算属性添加到 filter-item 和该属性的 watcher。所以，filter-item 组件会知道 vuex 是否改变了，并改变 isSelected 属性:

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']

代码笔:https://codepen.io/aircrisp/pen/MrXEgd?editors=0010

2)

The only way to actually change state in a Vuex store is by committing a mutation. https://vuex.vuejs.org/en/mutations.html

因此，如果您使用突变来更改 vuex 状态 - 您可以订阅 filter-item 组件中的突变，例如，在组件安装之后:

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

代码笔:https://codepen.io/aircrisp/pen/MrXEgd?editors=0010 (注释代码)