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

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

原创最新推荐文章于 2023-08-13 21:10:50 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

vue 专栏收录该内容

9 篇文章

订阅专栏

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

常规使用使用

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

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

Tempta的博客

08-27

1931

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

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

天渺(喵)工作室

05-31

9571

在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

elementUI动态设置tags标题，刷新页面后标题变成默认值

一天吃八顿

11-03

604

elementUI动态设置tags标题，刷新页面后标题变成默认值

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

caizhuangzhuang的博客

01-12

709

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

vue提交mutation_vuex提交mutation失效

weixin_34902502的博客

12-23

457

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

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中可复用的独立代码单元，它拥有自己...

Web开发中的状态管理技术详解

Redux是一个独立于框架的状态管理工具，最初为React设计，但也可用于其他视图层。它的核心思想是“单一事实来源”（Single Source of Truth），即将整个应用的状态集中存储在一个全局的store中。Store是一个只读对象...

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

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

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

lishuaihao的博客

01-07

802

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

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

TSeven37的博客

04-22

3665

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

1626

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

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

qq_35191845的博客

12-27

5283

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

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

xuelong的博客

08-13

1295

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

vuex中Mutations如何修改状态

baidu_36681154的博客

01-29

3607

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

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

qq_51542956的博客

11-08

1089

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

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

m0_70547044的博客

01-16

721

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

如何在vue3和js中使用vuex中mutations的方法

最新发布

07-29

在 Vue 3 项目中使用 JavaScript 调用 Vuex 的 `mutations` 方法，需要通过 `useStore` 钩子函数获取 Vuex store 实例，然后使用 `commit` 方法调用 `mutations`。以下是一个完整的示例，展示如何在 Vue 3 中使用 JavaScript 调用 Vuex 的 `mutations`。 ### 1. 创建 Vuex Store 首先，创建一个 Vuex store 实例，并定义 `state` 和 `mutations`。例如： ```javascript // src/store/index.js import { createStore } from 'vuex' import user from './modules/user' const store = createStore({ strict: process.env.NODE_ENV !== 'production', // 在开发状态下开启严格模式 modules: { user } }) export default store ``` ### 2. 在模块中定义 `state` 和 `mutations` 在模块中定义 `state` 和 `mutations`，例如在 `user` 模块中定义： ```javascript // src/store/modules/user.js export default { namespaced: true, state: { token: '' }, mutations: { updateToken(state, val) { state.token = val } } } ``` ### 3. 在 Vue 3 组件中调用 `mutations` 在 Vue 3 组件中，使用 `useStore` 钩子函数获取 Vuex store 实例，并使用 `commit` 方法调用 `mutations`： ```vue <template> <div> <button @click="updateToken">更新 Token</button> </div> </template> <script> import { useStore } from 'vuex' import { defineComponent } from 'vue' export default defineComponent({ setup() { const store = useStore() const updateToken = () => { const newToken = 'new_token_value' store.commit('user/updateToken', newToken) // 调用 mutations } return { updateToken } } }) </script> ``` 在这个示例中，`store.commit('user/updateToken', newToken)` 用于调用 `mutations` 中的 `updateToken` 方法，并传递 `newToken` 作为参数[^1]。通过 `useStore` 获取到的 `store` 实例，可以访问到 Vuex 中的 `state`、`getters`、`mutations` 和 `actions` [^2]。 ### 4. 注意事项 - 确保在 `mutations` 中的第一个参数是 `state`，这是必须的。 - `mutations` 是同步操作，不能在 `mutations` 中执行异步操作。如果需要执行异步操作，应该使用 `actions` [^3]。 - 如果模块是命名空间模块（`namespaced: true`），则在调用 `mutations` 时需要加上模块路径，例如 `'user/updateToken'` [^4]。通过以上步骤，可以在 Vue 3 项目中使用 JavaScript 调用 Vuex 的 `mutations` 方法来修改 `state` 数据。 ---