井井客

搜索

commit(vuex)将vue中定义的对象/数组传参需要注意

最近两天打算把之前做的一个vue的比较大的demo全部改为使用vuex来保存数据,但是在做的时候发现commit传参的时候,因为传的是vue中定义的对象,在commit后竟然也实现了“数据绑定”的赶脚

commit(vuex)将vue中定义的对象/数组传参需要注意

需求差不多是这样的:

有一堆上传图片资料的列表,点开内容页,分别可以上传相应的图片。
上传几张图,并且点击保存时,可以将相应图片资料保存,这时图片资料就叫数组A吧。
而数据则通过commit来更改state中相应的存诸值,暂时把值叫数组B。(这时数组A==数组B)
现在再次点开这个页面,从state拿到数组B。
走到这一步都没有问题,接下来删除/新增图片,数组A发生变化,这时当点击返回按钮时,理论上应该是不触发commit去更改state,数组B不会变化。(理论上这时数组A不等于数组B)
可是实际上再次点开,看到的效果就是上一步经过删除/新增操作后的新的图片数组A,而数组B也同时发生变化了。(数组A==数组B)
这种情况就像:只要数组A发生变化数组B也会实时发生变化一样。像是数据被绑定了。

具体代码如下:

//保存值
this.$store.commit('uploadOhterPicData',{ name : this.sid , val : this.fileData });
//获取值
this.fileData = this.$store.state.ohterPicDatas[ this.sid ];

这时就有点晕了,没有找到特别好的方法。我自己的实现就是在commit时,将保存的则,先转变为字符串,使用“JSON.stringify”方法。
而在获取时,则将字符串转变为对象的方式。(使用JSON.parse)

更改后的代码:

//保存值
this.$store.commit('uploadOhterPicData',{ name : this.sid , val : JSON.stringify( this.fileData ) });
//获取值
this.fileData = JSON.parse( this.$store.state.ohterPicDatas[ this.sid ] );

隐约感觉有点点明白,但是还是有一个迷云,待解决~

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:commit(vuex)将vue中定义的对象/数组传参需要注意
本文链接:http://www.jingjingke.com/c/02258.html

上一篇:JS+canvas生成验证码
下一篇:如何更方便的管理vue全局组件

文章分类

相关阅读

随便看看