在watch vue中更新对象属性状态
在watch vue中更新对象属性状态
提问于 2022-10-03 06:14:05
当条目对象中的items数组中的from_id属性与列表fromData数组中的对象的item_id匹配时，我试图将所选布尔值从对象列表项数组中更新为true。所选属性更新，但我得到了以下错误：
Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers.store.js
entry: {
items: [
{
from_id: 5,
to_id: 1,
quantity: 100,
},
{
from_id: 11,
to_id: 3,
quantity: 119,
},
{
from_id: 7,
to_id: 3,
quantity: 59,
},
]
}
lists: {
from: [
{
item: {...},
item_id: 5,
selected: false
},
{
item: {...},
item_id: 6,
selected: false,
},
{
item: {...},
item_id: 7,
selected: false,
}
]
}
const getters = {
entry: (state) => state.entry,
lists: (state) => state.lists,
};这是我尝试过的
computed: {
...mapGetters('Conversion', ['entry', 'lists']),
from: function () {
return this.lists.from.filter((item) => !item.selected);
},
},
watch: {
from: {
deep: true,
handler: function (items) {
const _entries = this.entry.items;
_entries.map((entry) => {
items
.filter((item) => item.item_id === entry.item_from_id)
.map((item) => (item.selected = !item.selected));
});
},
},
},回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-03 08:04:03
这个错误的意思是它所说的。你在商店外面的状态发生变异。这种情况应发生在突变/行动中。
您需要有一个操作/突变来以这样的方式修改状态：
mutations: {
toggle(state, id) {
let item = state.items.find(item => item.id === id)
item.selected = !item.selected;
}
}并将其发送/提交到商店外：
this.$store.dispatch('toggle', someId)Stack Overflow用户
发布于 2022-10-03 07:50:51
Vuex是one-way data flow商店。您将无法使用getter直接更改数据，而是使用action/诱变。https://vuex.vuejs.org/#what-is-a-state-management-pattern
在你的store.js里
const store = createStore({
...
mutations: {
patchEntry (state, payload) {
// Your logic here => return _entries
state.entry = Object.assign({}, state.entry, _entries)
}
}
})在你的观察者中：
watch: {
from: {
deep: true,
handler: function (items) {
store.commit('patchEntry', items)
});
},
},
},参考文献：https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73931695
复制相关文章
相似问题
腾讯云开发者
