Я хочу построить компонент фильтра с несколькими полями
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)
, я получу ту же ошибку
кажется, просто чтение это считается мутированием здесь? и я даже не читаю магазин, а просто объект данных этого компонента! это почему? как я могу это исправить? спасибо!