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

问题是您的二传手永远都不会被呼叫。使用了吸气剂，但是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
  }
}

在商店外对vuex状态对象进行突变

1 个答案: