【踩坑记录】Vuex中更改state的数据但是Vue中没有做出改变

2023-10-27 02:36| 来源: 网络整理| 查看: 265

今天在做Vue开发的时候遇到了个很奇怪的现象：改变了Vuex中的state的数据，但是页面没有做出改变。

首先放出代码：

Vuex：

import { createStore } from 'vuex'; /** * 用户构造函数 * @param {*} name 用户名 */ function User(name) { this.name = name; /** * 修改用户名 * @param {String} changedName 修改后用户名 */ this.changeName = (changedName) => { this.name = changedName; } } export default createStore({ state: { user: new User('swsk33') }, mutations: { change(state) { state.user.changeName('swsk'); console.log(state.user.name); } }, actions: { change(context) { context.commit('change'); } }, });

Vue组件：

{{ user.name }} 更改 import { mapState, mapActions } from 'vuex'; export default { computed: { ...mapState(['user']), }, methods: { ...mapActions(['change']), }, };

可见，在Vuex中，方便起见我定义了个构造函数，用于创建用户对象。可以看到，用户对象中有一个changeName函数可以更改自己的用户名，这个函数相当于可以更改自己的值。

然后在state中初始化一个用户对象，并定义好mutations，actions函数以测试更改，注意mutations中方法是使用用户对象自己的方法修改用户名，而不是直接赋值。

最后，vue组件中，映射Vuex中的user和change函数进行测试。理论上，我点击更改时，显示的用户名会变，然而点击后并没有变。

点击后网页：

网页上内容并没有变。

但是在控制台中输出这个state中的user，实质上已经改变了：

我们知道，state中的数据也是响应式的，而更改其数据的唯一方法就是mutations。

但是可见，上述修改数据的形式并不同于平时，没有在mutations进行直接赋值，而是使用对象自己的方法修改自己。

这就是问题所在：mutations中的函数没有进行一个直接的更改对象的操作，而是间接地调用对象自己的方法修改对象自己。

这样，数据确实修改了，但是可以理解为：并非是mutations进行修改的。

这种情况下，mutations没有直接修改数据，就导致Vue中无法侦测到数据变化做出响应。

解决办法很简单，不要在构造函数中定义修改对象自己属性的方法，而是使用mutations修改即可。

我们修改上述Vuex如下：

import { createStore } from 'vuex'; /** * 用户构造函数 * @param {*} name 用户名 */ function User(name) { this.name = name; } export default createStore({ state: { user: new User('swsk33') }, mutations: { changeName(state) { // 进行直接修改操作 state.user.name = 'swsk'; } }, actions: { change(context) { context.commit('changeName'); } }, });

所以，使用Vuex时，一定要牢记官方文档的这一句话：更改Vuex的store中的状态的唯一方法是提交mutation。

任何修改数据的操作应当放在mutations中，而非别的函数里面。

【本文地址】

公司简介

联系我们