Vuex, выбрасывающий "не мутировать ..." при отправке обновленного глубокого объекта из данных () - PullRequest
0 голосов
/ 30 октября 2018

Я хочу построить компонент фильтра с несколькими полями

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), я получу ту же ошибку

кажется, просто чтение это считается мутированием здесь? и я даже не читаю магазин, а просто объект данных этого компонента! это почему? как я могу это исправить? спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...