vuex修改state后,页面没有重新渲染

解决方法:

当state里属性定义为obj类型时,有时候出现:修改完state值之后,页面并没有同步更新,这时候需要转换一下:

JSON.parse(JSON.stringify(obj))

背景&遇到的问题:

1、本次开发一个页面,定义了一个state为imgLinks: {},此对象存放组件对应的图片链接,如:{ 组件的fieldName: { image1:"imageLink", image2: "imageLink2" } },此state被用于前端页面对图片的展示。
2、通过mutations的方式对imgLinks中的图片链接进行修改:此时采用的方法是通过对imgLinks对象中的image1的value进行修改实现:

updateImgLink(state, { imgLinkContent }) {
  if (imgLinkContent) {
    state.imgLinks = imgLinkContent
  }
},

3、结果发现修改后发现前端页面没有重新渲染
4、于是用这种方式修改:

updateImgLink(state, { imgLinkContent }) {
  if (imgLinkContent) {
    state.imgLinks = JSON.parse(JSON.stringify(imgLinkContent))
  }
},

5、成功

解读

1、首先分别说下他们的用法:
JSON.parse() 是将字符串中的对象解析出来
JSON.stringify(obj) 是拷贝一个字符串
拷贝一个字符串会新辟一个新的存储地址,所以先转成一个字符串,在解析出对象,这样就可以深拷贝一个对象。
2、在任何编程语言中的函数调用中,引用传递意味着与传递的变量相关联的数据在传递给函数时不会被复制,因此函数对传递变量所做的任何修改将在函数调用终止后保留在程序中。值传递是指与变量相关的数据在传递给函数时被实际复制,当变量在函数返回时超出函数体的范围时,该函数对该变量所做的任何修改都将丢失。
参考:
https://blog.csdn.net/degouguang9721/article/details/102344209
http://fanyi.baidu.com/transpage?query=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F50070900%2Fjson-object-copy-in-vuex-getter&source=url&ie=utf8&from=auto&to=zh&render=1&origin=ps
https://www.imooc.com/article/70653

你可能感兴趣的:(vuex修改state后,页面没有重新渲染)