如何解决从Vuex存储设置初始本地数据会出现“请勿更改”错误
我以为我理解了将初始状态数据从Vuex加载到组件的本地数据中的正确方法,但是为什么这会给我“ [vuex]不要在突变处理程序之外对vuex存储状态进行突变。”错误!我正在使用突变处理程序!
我希望我的组件数据开始为空,除非从某个页面返回(然后它应该从Vuex中提取一些值)。
该组件在一堆复选框上使用v-model=“selected”
。然后我有以下内容:
// Template
<grid-leaders
v-if="selected.regions.length"
v-model="selected"
/>
// Script
export default {
data() {
return {
selectedProxy: {
regions: [],parties: [],},}
},computed: {
selected: {
get() {
return this.selectedProxy
},set(newVal) {
this.selectedProxy = newVal
// If I remove this next line,it works fine.
this.$store.commit("SET_LEADER_REGIONS",newVal)
},mounted() {
// Restore saved selections if coming back from a specific page
if (this.$store.state.referrer.name == "leaders-detail") {
this.selectedProxy = {...this.$store.state.leaderRegions }
}
}
}
// Store mutation
SET_LEADER_REGIONS(state,object) {
state.leaderRegions = object
}
解决方法
好,我知道了!复选框组件(我没有写过)正在执行此操作:
updateRegion(region) {
const index = this.value.regions.indexOf(region)
if (index == -1) {
this.value.regions.push(region)
} else {
this.value.regions.splice(index,1)
}
this.$emit("input",this.value)
},
第this.value.regions.push(region)
行是问题所在。您无法直接编辑this.value
道具。我做到了:
updateRegion(region) {
const index = this.value.regions.indexOf(region)
let regions = [...this.value.regions]
if (index == -1) {
regions.push(region)
} else {
regions.splice(index,{
...this.value,regions,})
},
然后我的计算selected
需要它:
selected: {
get() {
return this.selectedProxy
},set(newVal) {
// Important to spread here to avoid Vuex mutation errors
this.selectedProxy = { ...newVal }
this.$store.commit("SET_LEADER_REGIONS",{ ...newVal })
},},
现在效果很好!
我认为问题是您不能直接编辑v模型value
,而且还必须知道将引用传递给对象,因此对象散布运算符是真正的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。