关于vuex更新视图引发的一些思考详析
更新时间：2022年06月15日 10:03:42 作者：朝着全栈加速前进
我们在vuex中操作数据时遇见视图不更新的情况,下面这篇文章主要给大家介绍了关于vuex更新视图引发的一些思考,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
vuex可以集中式存储管理应用的所有组件的状态，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新
但是，最近踩了vuex的坑：
场景
- 第一次进入页面加载数据，数据不显示，点击某个按钮或者切换页面后，数据会展示出来
- 通过分析发现，当第一次加载页面的时候，获取数据的数据为{} (空对象)，当数据获取完毕，执行commit()
- 而此时通过commit()已经改变了state中的数据，在页面中通过computed也可以获取更新后的数据。但是视图没有更新，获取的数据没有展示出来
解决
尝试在页面中发送commit()来再次更新视图，无效
将Vue.set(state, 'myData', data)，无效
......
最终方案：
代码中所声明的对象里面的key是动态的，所以初始只声明了{ }。
原来，数据是数组的时候，不能通过索引直接进行赋值，也不能修改数组的长度。 而Vuex只会跟踪在对象创建时就存在的属性，新添加到对象上的新属性不会触发更新。
并且循环嵌套层级太深，视图也可能不更新
最终，给数组对象赋值，这里转化了一下写法，生效。具体如下：
const store = new Vuex.Store({
state: {
myData: []
},
mutations: {
setData(state, data) {
// state.myData = data 不更新视图
Vue.set(state, 'myData', JSON.parse(JSON.stringify(data)))
}
},
actions: {
myFn () {
store.commit('setData')
}
}
})
export default store如果添加了新的对象属性，也可以使用Object.assign()，但必须深拷贝（否则加到对象上的新属性不会触发更新）
let someObject = Object.assign({}, someObject, {newField: value}) // 深拷贝
// Object.assign(this.someObject, { key: 1 }) // 浅拷贝总结
- 不能直接去改变 store 中的状态。改变 store 中的状态的需要提交 (commit) mutation
- 在组件中调用 store 中的状态在计算属性中返回即可获取，也可以直接$store.state来获取
computed: {
myData () {
return store.state.myData
}
},
mounted() {
console.log(this.store.state.myData)
}为数组添加新属性并不会触发视图更新，因为vue没有给新属性增加get和set监听
赋值的数据，如果循环嵌套层级太深，可能会导致视图不更新
扩展
这些方法操作数组，vue可以检测到数据变化：
push() pop() shift() unshift() splice() sort() reverse()
而下面这些不会改变原数组（返回了新数组），vue检测不到：
filter() concat() slice()
到此这篇关于vuex更新视图引发的一些思考的文章就介绍到这了,更多相关vuex更新视图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
本文主要介绍了Vue3组合式API中使用forwardRef()函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能2025-02-02
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧2023-07-07
vue表单验证你真的会了吗？vue表单验证（form）validate
这篇文章主要介绍了vue表单验证你真的会了吗？vue表单验证（form）validate,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文2018-04-04
这篇文章主要为大家详细介绍了Proxy中代理数据拦截的方法，文中的示例代码讲解详细，对我们学习或工作具有一定的借鉴价值，需要的可以参考一下2022-12-12
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家2023-06-06
vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决
这篇文章主要给大家介绍了关于vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决办法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了VueJS页面渲染之后如何调用函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论