如何解决VueJS - 错误:[vuex] 不要在变异处理程序之外改变 vuex 存储状态
我正在尝试在深色和浅色主题之间切换,并且我正在使用羽毛图标进行切换,我可以更改主题,但是在控制台窗口中出现错误。下面显示了我的代码和错误。
这是我的代码:
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.theme=== 'light'" icon="Icon" v-model="OnChange" vs-name="theme-mode-light"/>
</div>
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.theme=== 'dark'" icon="Icon" v-model="OnChange" vs-value="dark" vs-name="theme-mode-light"/>
</div>
...
watch: {
layoutType (val) {
if (val === 'horizontal') {
if (this.theme === 'semi-dark') this.theme = 'light'
if (this.navbarType === 'hidden') this.navbarTypeLocal = 'floating'
this.$emit('updateNavbarColor','#fff')
}
}
},computed: {
theme: {
get () { return this.$store.state.theme },set (val) { this.$store.dispatch('updateTheme',val) }
},}
methods: {
OnChange(theme) {
this.$store.state.theme = theme
}
}
actions.js
updateTheme ({ commit },val) {
commit('UPDATE_THEME',val)
},
mutation.js
UPDATE_THEME (state,val) { state.theme = val },
这是我得到的错误:
有人能告诉我为什么我会收到这个错误,即使我可以在主题之间切换,也请告诉我如何摆脱这个错误。
解决方法
这是因为您试图不使用变异直接更新 vuex 状态。 如果您检查方法 onChange,您是在尝试将值直接分配给 vuex 状态。 正统的方法是使用突变更新它
你可以修改你的方法
methods: {
OnChange(theme) {
this.$store.dispatch('updateTheme',theme);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。