vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作


Posted in Javascript onNovember 16, 2020

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

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

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

这样的代码

data() {
 return {
  tableData: this.$store.state.AdminInfo
 };
 }

然后在 template 中使用 tableData

<el-table :data="tableData" class="tablePst">
 <el-table-column label="登录名" prop="loginname"></el-table-column>
 <el-table-column label="真实姓名" prop="realname"></el-table-column>
</el-table>

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

问题

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

解决

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

<el-table :data="$store.state.AdminInfo" class="tablePst">
 <el-table-column label="登录名" prop="loginname"></el-table-column>
 <el-table-column label="真实姓名" prop="realname"></el-table-column>
</el-table>

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', {
  get: function() {
   console.log('我的名字叫'+name);
   return name;
  },
  set: function(value) {
   console.log('你叫'+value)
   name = value;
  }
 });
  obj.name ='张三';//你叫张三
  obj.name//我的名字叫张三

从上述我们可以简单发现。当我们对这个对象的name属性赋值的时候,就会触发set方法,获取name属性的时候就会触发get方法;

2.因此在vue中写在data中的属性是是可以转换成getter和setter,换一句话就是响应式的,其他定义在data之外的数据,是无法响应的渲染,意思就是改变数据页面也不会刷新,所以一切要渲染到页面上的数据,必须写在data中,

不需要的,可以定义在this上,

var vm = new Vue({
 data:{
  a:1
 }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

3.简单介绍完了,我们来列举几个不刷新的实例当然上述也是一种

第一种:修改对象的某一属性

vue只会将已经在data中声明的属性变为响应,没有声明的是不响应的

<template>
 <div>
   <div v-for='item in list'>{{item}}</div>
   <button @click='click'>改变</button>
   <button @click='hadelClick'>解决方法</button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:{a:'a',b:'b'},
   }
  },
  methods: {
     click() {
     // 未声明不触发渲染
      this.list.c='c'

     },
     hadelClick(){
      // 解决方法,使用vue提供的$set方法来触发渲染
      this.$set(this.list,'d','d')
     }
    }
 })  
</script>

当然如果我们要添加多个属性,可以使用 Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。(简单说就是合并到第一个参数中)

this.list = Object.assign({},this.list,{c:'c',d:'d'})

第二种:修改数组对象的某一属性

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'>改变</button>
   <button @click='hadelClick'>解决方法</button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      //想这样直接给数组中的某一个对象直接赋值,是无法动态渲染的(即改变了数据,页面不渲染)
      this.list[0] = {a:'css'} //页面不渲染
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
     },
     hadelClick(){
      // 解决方法,使用vue提供的$set方法来触发渲染
      this.$set(this.list[1],'a','css')
      console.log(this.list)//[{a:'css'},{a:'css'},{a:'js'}]
     }
    }
 })  
</script>

当然前文讲过,vue会遍历data中的数据,将对象转换成setter和getter。所以数组中的也不例外,所以上述操作

改成:

click(){
 this.list[0].a = css //依旧能够触发setter。实现数据重新渲染
  }
}

在vue中更多的是数组的操作不刷新,一种是通过索引赋值,一种是修改数组长度,如何解决呢?

vue官方也给了方法

数组的API,中能够改变原始数组的都能触发更新;

1、push()

2、pop()

3、shift()

4、unshift()

5、splice()

6、sort()

7、reverse()

第二种是返回一个新数组的,这种数组在引用地址上已经发生根本改变,这样的赋值操作是能触发更新的(这是处理不刷新的思路,就是改变引用地址,重新赋值触发更新)

简单说,用数组的API就是直接用原数组接收改变的数组,

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'>改变原数组</button>
   <button @click='hadelClick'>不改变原数组</button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      //改变数组刷新页面
       this.list.push({a:'css'})
     },
     hadelClick(){
    //重新赋值刷新页面   
      this.list = this.list.map(item=>{
         item.a = 'css'
         return item
        })
    }
 })  
</script>

最后提供解决思路(以上都搞不定的话)

对象和数组都是引用传递,要变成新数组,来接受,就需要改变源,

第一种

let arr = []//新数组
this.list.forEach(item=>{ //需要渲染的数组
  //执行你的操作,最后用放到arr中
  arr.push(item)
})
this.list = arr //相当于返回一个新数组可以触发渲染

第二种

//想要直接改变渲染数组中的数据,但没有渲染
//解决方法:
let arr = this.list.slice(0);//深拷贝,(等价一个新的数组)
arr.forEach(item=>{
  //执行你的操作
})
//赋值操作
this.list = arr

当然这里只是简单介绍了,有关深拷贝的详细介绍,还请自行百度

上述如果都无法执行,但你的数据缺实修改了,可以使用this.$forceUpdate()方法 (强制刷新)

//this.$forceUpdate();//强制刷新

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'>改变</button>
   <button @click='hadelClick'>解决方法</button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      this.list[0] = {a:'css'} //页面不渲染
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
     },
     hadelClick(){
      this.list[0] = {a:'css'} //页面不渲染
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
       this.$forceUpdate();//强制刷新
     }
    }
 })
  
</script>

以上这篇vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript时间函数基础介绍
Mar 28 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
小程序实现上下切换位置
Nov 16 #Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
You might like
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
修改file按钮的默认样式实现代码
2013/04/23 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
javascript常用的方法分享
2015/07/01 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python守护进程用法实例分析
2015/06/04 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
200行python代码实现2048游戏
2019/07/17 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python实现按日期归档文件
2021/01/30 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
上课说话检讨书大全
2014/01/22 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
商场租赁意向书
2014/07/30 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
匿名检举信范文
2015/03/02 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Python OpenGL基本配置方式
2022/05/20 Python