vuex中的值变化 页面重新渲染_vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作...

vuex数据改变，组件中页面不渲染

相信许多vuex新手都会遇到这样的问题：

vuex数据更新后，插件中使用数据的地方没有更新

这样的代码

data() {

return {

tableData: this.$store.state.AdminInfo

};

}

然后在 template 中使用 tableData

这样的话，就会出现数据改变不渲染的问题

问题

要解决问题，就得理解vue生命周期，页面加载前 tableData 获取 store 里的值赋给自己，这样 tableData 只有一初始值，后续vuex中状态发生改变，并不会再次赋值给 tableData ，除非页面刷新重新加载，组件生命周期重新开始，才能拿到最新的值

解决

1.去掉组件中 tableData 的状态，在模板中直接使用 $store.state.AdminInfo 这样就能随时拿到最新的状态值了

2.使用mapState,把vuex中的状态暴露给组件，再使用，具体见文档 vuex mapState官方文档.

补充知识：解决vue修改数据页面不重新渲染问题(Vue中数组和对象更改后视图不刷新)

vue渲染机制和如何解决数据修改页面不刷新问题的多种方法

本文不讲原理，只讲干货易懂易学，(感觉能学到知识，麻烦给小编来个赞！)

首先 第一点，vue底层是 将data对象传人，使用Object.definePropety,转换为getter和setter，所以，vue不支持IE8.

1.简单介绍一下Object.definePropety,

Object.defineProperty(obj, prop, descriptor)

//参数

obj

要在其上定义属性的对象。

prop

要定义或修改的属性的名称。

descriptor

将被定义或修改的属性描述符

var obj = {}

Object.defineProperty(obj, 'name', {