在存储之外改变 vuex 状态对象

Question

假设有这样的商店

...
state: {
    filters: {
        a: '',
        b: ''
    }
},
mutations: {
    updateFilters(state, newObject) {
        state.filters = newObject
    }
}
...

还有这样的组件

...
<input v-model='filters.a'></input>
...
computed: {
    filters: {
        get() {
            this.$store.state.filters
        }
        set(value) {
            this.$store.commit('updateFilters', value)
        }
    }
}
...

一切正常，但我看到一个警告说

错误：“[vuex] 不在突变之外改变 vuex 存储状态 处理程序。”

所以我显然错过了一些东西

我不明白如何处理这个问题。 有人可以解释如何改变组件中的状态对象吗？

我知道，我可以改变每个过滤器道具，但是我在那个对象中有很多过滤器，所以在这种情况下改变每个道具并不是最好的解决方案。

Answer 1

问题是你的 setter 永远不会被调用。使用了getter，但是直接更新a。

这是一种选择：

<input :value="filters.a" @input="updateFilterA"></input>
...
computed: {
  filters() {
    return this.$store.state.filters /* or mapState */
  }
},
methods: {
  updateFilterA(value) {
    this.$store.commit("updateFilterA", value)
  }
}

在商店里：

mutations: {
  updateFilterA(state, newValue) {
    state.filters.a = newValue
  }
}