Question

我想构建一个具有多个字段的过滤器组件

data: () => ({
  loanFilter: {
    title: null,
    user: null,
    amount: null,
    apr: null,
    rate: null,
    rating: null,
  },
}),

<v-text-field label="Title" v-model="loanFilter.title"></v-text-field>
// (...)

这个想法是：所有这些输入都写入数据对象，然后我有一个观察者，将更改分发到商店：

watch: {
  loanFilter: {
    handler: function (val) {
      this.$store.dispatch('loan/updateLoanFilter', val)
    },
    deep: true,
  },
},

现在，如果我在输入中输入“ aaaaa”之类的内容， 第一个字符有效，第二一掷

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
run @ vue.esm.js?efeb:3235
update @ vue.esm.js?efeb:3207
notify @ vue.esm.js?efeb:697
reactiveSetter @ vue.esm.js?efeb:1014
set @ vue.esm.js?efeb:1036
callback @ FilterLoans.vue?6c61:18
invoker @ vue.esm.js?efeb:2027
Vue.$emit @ vue.esm.js?efeb:2538
e.(anonymous function) @ backend.js:1
set @ vuetify.js?dc48:13367
onInput @ vuetify.js?dc48:13581
invoker @ vue.esm.js?efeb:2027
fn._withTask.fn._withTask @ vue.esm.js?efeb:1826
14:19:29.294 vue.esm.js?efeb:1741 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?358c:97)
    at Vue.store._vm.$watch.deep (vuex.esm.js?358c:746)
    at Watcher.run (vue.esm.js?efeb:3233)
    at Watcher.update (vue.esm.js?efeb:3207)
    at Dep.notify (vue.esm.js?efeb:697)
    at Object.reactiveSetter [as title] (vue.esm.js?efeb:1014)
    at Proxy.set (vue.esm.js?efeb:1036)
    at callback (FilterLoans.vue?6c61:18)
    at VueComponent.invoker (vue.esm.js?efeb:2027)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:2538)

即使我没有以任何方式对其进行变异。

如果我将观察者更改为this.$store.dispatch('loan/updateLoanFilter', 'any hardcoded string')，它就可以工作（但是过滤器当然就是那个字符串...）

如果将观察者更改为this.$store.dispatch('loan/updateLoanFilter', this.loanFilter)，则会收到相同的错误

似乎只是阅读它在这里被认为是变异的？而且我什至没有在阅读商店，而只是在阅读该组件的数据对象！这是为什么？我该如何解决？谢谢！

Vuex在从data（）分派更新的深度对象时抛出“不要变异...”

0 个答案: