【无标题】Vuex使用mutations修改值，视图层没有改变

最新推荐文章于 2023-08-13 21:10:50 发布

James clark

最新推荐文章于 2023-08-13 21:10:50 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/jamesclark/article/details/122318697

vue 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在Vue中遇到计算属性computed与Vuex状态管理库结合使用时，视图未随数据变化更新的问题。尽管Vue和mapGetters都有缓存机制，但在处理数组时，由于JavaScript的限制，Vue无法检测某些数组变化。文中提到，通过`Vue.set`或`splice`方法可以触发视图更新，但`Vue.set`在示例中未成功。最终，使用`splice`成功实现了视图的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常规使用使用

computed: {
    ...mapGetters({
      get_labelList: "label/get_labelList",
      select_labelList:'label/select_labelList'
    }),

遇到问题

按道理来说没有问题，计算属性缓存，mapGetters也是有缓存功能，数据改变，正常就该显示
但是结果却相反，computed值有改变，但是视图层没有改变

造成原因

网上查找了一番，给出的解释是由于 JavaScript 的限制，Vue 不能检测以下变动的数组

解决思路

数组有一些方法可以导致视图更新，修改值是set与splice，set我试了没成功，希望好心人可以告诉我为啥呢？
失败的

this.$set(state.labelList[tagsIndex].tags,idx,tag)
Vue.set(state.labelList[tagsIndex].tags,idx,tag)

成功的，是使用splice

state.labelList[tagsIndex].tags.splice(idx,1,tag)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

James clark

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp [全端兼容] - 详细实现全局修改设置字体大小功能效果，统一修改页面字号字体大小，一键改变字号整个项目立即生效，大中小字号预设、老年人大字模式场景，uniApp全平台兼容控制页面字号大小

资深程序员

09-18

1万+

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，修改字体大小，一键调整UniApp字体大小，实时改变不用刷新，动态设置字体大小，uniapp全局修改字体字号大小，如何控制全局字号，可调整显示的字体，全项目生效，老年人大字模式，改变所有页面的字体，全局设置字体大小，实现小中大的字体切换，设置改变全局字体大小功能，如何做到全平台兼容，H5APP实现全局字体大小调整，不兼容报错，用户设置字号，全局设置应用字体大小，大中小字体修改，页面设置page-me

VueX 通过Mutation修改了State中的数据，在页面上却没有渲染

最新发布

m0_53613823的博客

02-10

114

页面上面最好使用$store.state.数据，这样修改的时候就会去找VueX中的数据状态。

参与评论您还未登录，请先登录后发表或查看评论

在vuex中利用axios请求数据，放入组件中，组件拿不到数据

qq_51542956的博客

11-08

1065

上面主要是通过axios将dishesList请求到，然后通过mutations修改state内的dishesList。我猜测应该是异步的问题，于是用了this.$nextTick但到最后结果并没有变化。（这个并没有搞懂原因）然后在组件内通过mounted钩子，调用getDisheList,来让组件获取dishesList。下面是我的store内的js代码。到最后，利用计算属性就成功了。

提交mutations之后，state的值没有发生变化

Tempta的博客

08-27

1906

VueX中设置namespaced: true后 mutations不生效问题

caizhuangzhuang的博客

01-12

684

VueX中设置namespaced: true后 mutations不生效问题

vue提交mutation_vuex提交mutation失效

weixin_34902502的博客

12-23

441

main.jsimportVuefrom'vue'importVuexfrom'vuex'importVueResourcefrom'vue-resource'importrouterfrom'./router'importstorefrom'./store'importAppfrom'./App'Vue.use(VueResource)newVue({rou...

vux中mutations方法形参的解构赋值不起效果

lishuaihao的博客

01-07

782

今天没事说练一下vux吧，感觉轻轻松松，简简单单，几分钟就能过一遍，树脂道刚开始就卡着了。就是使用vuex点击加一在这里搭配对象的结构赋值不起作用

Vue开发-基于vue+vuex+localstorage实现的本地记事本项目.zip

05-09

8. **事件处理**：Vue的事件绑定机制使得用户交互变得简单，例如点击按钮触发添加或删除笔记的操作，这些事件通常会触发Vuex的actions，然后由actions去调用mutations改变状态。 9. **样式和布局**：项目可能使用...

Vue2结合Vuex与Vue-Router实践Demo展示

1. **响应式数据绑定**：Vue.js使用双向数据绑定机制，当数据对象的属性发生变化时，视图层会自动更新。这大大减少了DOM操作，提高了开发效率。 2. **组件化开发**：组件是Vue.js中可复用的独立代码单元，它拥有自己...

【React_Vue提升】：使用前端框架革命性地增强网页体验

[【React_Vue提升】：使用前端框架革命性地增强网页体验](https://habrastorage.org/web/88a/1d3/abe/88a1d3abe413490f90414d2d43cfd13e.png) # 1. 前端框架的兴起与重要性在过去的十年中，前端开发经历了翻天覆地...

杭电需求分析期末项目网上商城前端Vue项目

12-28

2. **Vuex使用**：理解store、mutation、action、getter的概念，如何通过mutations修改状态，通过actions异步操作数据，以及如何在组件中使用getters获取状态。 3. **Vue Router配置**：设置路由规则，定义动态路由...

通过计算属性解决vue中map数据修改无法动态响应的问题

TSeven37的博客

04-22

3634

https://blog.csdn.net/SGAFPZys/article/details/80754786

Vuex中Mutations修改状态

热门推荐

Yo,的博客

10-07

3万+

上篇是读取state，这篇是修改状态。即如何操作Mutations。一.$store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- ...

获取vuex中数据不是最新值的问题

baixue0111的博客

02-25

1586

在开发过程中，我们会把某些数据存到Vuex中，当我们在其它模块获取时，使用方法不对，往往不会取到最新的值，如果想换取最新Vuex中值可使用下面这个方法： computed: { // 计算属性 getTotal() { return this.$router.status.total } } 把获取值的方法写在计算属性中，页面中可直接这样使用： <div>{{getTotal}}</div> ...

vue中vuex数据更新试图不更新[解决方法]

qq_35191845的博客

12-27

5227

我们在vuex中操作数据时遇见视图不更新的情况原理：去vue的官网看就行了跳转使用方法：Vue.set(target,propertyName,value) target:要更改的数据（一般是响应式对象）例：state.data property:这个对象中的子对象或者属性 value：你想要赋的值使用实例： (可以直接下拉到使用Vue.set后的内容) 页面内容 <templa...

从Vuex中获取的数据更新界面没有反应

xuelong的博客

08-13

1224

引用Vuex中的数据之后，在修改数据后，引用的数据没有实时更新，需要切换到其他页面，在切换回来数据才会更新，重新渲染页面。

vuex中Mutations如何修改状态

baidu_36681154的博客

01-29

3594

Mutation是什么? 简单例子:例如我们的百度钱包的金额假设是一个共用的数据，那么当我到百度购物车页面购买某一产品时，我们的共用数据发生了变化，那么我们在购物车页面是变化后值，在百度钱包的账号页面也应该是变化后值，如何让这个值发生变化就需要Mutation Mutation怎么用? 下面我将介绍怎么修改他的状态方法? 第一步在你写公共数据仓库的文件（s

解决Vuex刷新页面数据丢失的问题

m0_70547044的博客

01-16

701

解决Vuex刷新页面数据丢失的问题

vuex中更新对象或数组的值页面不更新的问题

天渺(喵)工作室

05-31

9489

在Vuex中,如果store中数据是数组或者是对象,操作之后，vuex 数值已经改变了,但页面展示的对应数值却没有改变。类似的情况，大部分出现在这几个场景 state: { obj: { a:1, }, arr: [0,1,2] } 1. 改变数组的某一项 state.arr[0] = 1; 2. 对象赋值新属性 state.obj.b = 2; ... 解决方案优先使用Vue.set，使用JSON.p

3vuex里面mutations如何使用?

07-09

在 Vuex 中，`mutations` 用于修改 `state` 的方法。你可以通过以下步骤来使用 `mutations`： 1. 在 Vuex 的 `store` 中定义 `mutations` 方法。每个 `mutation` 方法会接收一个参数 `state`，用于修改状态。例如，定义一个名为 `increment` 的 `mutation` 方法来增加 `state` 中的计数器 `count`： ```javascript // ... mutations: { increment(state) { state.count++; } } ``` 2. 在组件中使用 `this.$store.commit()` 方法来调用 `mutations`。你需要在组件的方法中调用 `commit` 方法，并传入要调用的 `mutation` 的名称。例如，在组件的某个方法中调用 `increment` `mutation`： ```javascript methods: { incrementCount() { this.$store.commit('increment'); } } ``` 3. 当调用 `commit` 方法时，`Vuex` 会自动将指定的 `mutation` 与对应的 `state` 关联起来，并触发相应的更新。需要注意的是，`mutations` 是同步的操作，只能进行简单的状态修改。如果需要进行异步操作，你应该使用 `actions`。希望这能回答你的问题。如果还有其他问题，请随时提问！