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

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

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

首先放出代码:

Vuex:

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

Vue组件:

<template><divid="app"><div>{{ user.name }}</div><div@click="change">更改</div></div></template><script>import { mapState, mapActions } from'vuex';
exportdefault {
computed: {
...mapState(['user']),
  },
methods: {
...mapActions(['change']),
  },
};
</script>

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

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

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

点击后网页:

网络异常,图片无法展示
|

网页上内容并没有变。

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

网络异常,图片无法展示
|

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

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

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

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

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

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

我们修改上述Vuex如下:

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

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

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

相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
32 4
|
13天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
25 1
|
13天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
35 1
|
13天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
50 0
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
27 6
|
18天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
26 1