如何解决如何在Nuxt.js中更新$ auth.user属性?
当我想更新$auth.user.balance
时:
methods:{
test(){
this.$auth.user.balance = 10;
}
}
但是它返回错误:
Error: [vuex] do not mutate vuex store state outside mutation handlers.
如何在Nuxtjs中更新这些vuex属性?
解决方法
在使用Vuex时,您仅应通过突变来突变状态,在Vuex中,您应创建如下所示的突变:
setBalance(state,payload) {
auth.user.balance = payload;
},
在您的组件中,您需要在methods
中映射新的突变,
...mapMutations('auth',['setBalance']),
别忘了从vuex导入mapMutations
import { mapMutations } from 'vuex';
以及在您的组件中,当您想设置一个新值来平衡通话时
test(){
let newValue = 10;
this.setBalance(newValue);
}
您可以在Vuex文档中的Vuex存储here中了解有关突变的更多信息
, Nuxt提供了$auth.setUser()
方法来设置用户。
像这样使用$auth.setUser()
:
const updatedUser = {...this.$auth.user}
updatedUser.balance = 10;
this.$auth.setUser(updatedUser)
商店中的数据更新始终应该是不变的。
因此,请在将对象传递给setUser
之前创建对象的新引用,以避免发生反应性问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。