vue实现收藏功能2018-10-17
先部署好整体的逻辑样式,点击收藏变红心,未收藏是灰色
![](https://img.haomeiwen.com/i6323130/3dee93875d310f33.png)
![](https://img.haomeiwen.com/i6323130/113fd5d37bc060b9.png)
![](https://img.haomeiwen.com/i6323130/d5fd5d89f1b0731c.png)
![](https://img.haomeiwen.com/i6323130/3685865d77a15711.png)
。将收藏状态缓存到localstorage里面,这样的话,刷新状态依然是收藏。
每个商家的页面url应该是有不同商家的id作为url参数的,我们要通过一个方法去拿到url
将方法抽离为公共函数,将url 的参数部分解析成一个对象,里面包含key:value这样的值
拿到url参数的方法:window.location.search
使用正则表达式解析url参数为对象
拓展属性的方法: Object.assign()
方法:
1.在一开始获取seller的时候,通过一个立即执行函数获取id。
APP.vue
![](https://img.haomeiwen.com/i6323130/31a5ad2f3bc9d063.png)
2.定义公共方法urlParse
![](https://img.haomeiwen.com/i6323130/375e01e34d22949a.png)
正则http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
然后再页面引入之后,使用console.log(queryPrama);
会得到结果:
![](https://img.haomeiwen.com/i6323130/5bf4c54a67a66101.png)
就是我们想要的结果。
这样的话,我们通过函数将url参数转换成想要的对象格式,并且将它通过id立即执行函数传给seller, 就可以通过seller.id得到这个对象了。
在发送请求时,将this.seller.id带上
![](https://img.haomeiwen.com/i6323130/69af25b752e21b13.png)
在XHR异步请求里,可以查看到
![](https://img.haomeiwen.com/i6323130/0e0ae1551f22b116.png)
请求的文件自己加上了参数。
如果要直接使用seller.id 来获取id的话,需要使用assign来拓展属性。
![](https://img.haomeiwen.com/i6323130/9aee6fb0f917df25.png)
输出结果是123123。说明可以直接使用seller.id取到url的id值了。
。下面开始建立缓存
localstorage要与商品不同的id关联起来才可以,不能直接写。
建立一个管理数据存取的js文件 store.js 。
![](https://img.haomeiwen.com/i6323130/3d862f5c8df6cce8.png)
使用:
引入这两个方法
![](https://img.haomeiwen.com/i6323130/3dd321202917c2ce.png)
在转换收藏状态的函数下面引入方法储存状态
![](https://img.haomeiwen.com/i6323130/85c763a9c503c01f.png)
测试:
如果是第一次收藏之前,没有创建seller的情况下,控制台输入localStorage发现__seller__字段长度为1,只有一个warn,而收藏之后,seller字段长度变为2,出现seller字段为
![](https://img.haomeiwen.com/i6323130/3422919c24547975.png)
再次刷新页面,依然保持收藏状态。
而取消收藏之后,seller字段为:
![](https://img.haomeiwen.com/i6323130/54391e1c1965d586.png)
key的值变为false了。
再次刷新依然为未收藏。
设置localstroge成功。