vue实现收藏功能2018-10-17

先部署好整体的逻辑样式，点击收藏变红心，未收藏是灰色

。将收藏状态缓存到localstorage里面，这样的话，刷新状态依然是收藏。

每个商家的页面url应该是有不同商家的id作为url参数的，我们要通过一个方法去拿到url

将方法抽离为公共函数，将url 的参数部分解析成一个对象，里面包含key:value这样的值

拿到url参数的方法：window.location.search

使用正则表达式解析url参数为对象

拓展属性的方法： Object.assign()

方法：

1.在一开始获取seller的时候，通过一个立即执行函数获取id。

APP.vue

2.定义公共方法urlParse

decodeURIComponent

正则http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

然后再页面引入之后，使用console.log(queryPrama);

会得到结果：

就是我们想要的结果。

这样的话，我们通过函数将url参数转换成想要的对象格式，并且将它通过id立即执行函数传给seller, 就可以通过seller.id得到这个对象了。

在发送请求时，将this.seller.id带上

在XHR异步请求里，可以查看到

请求的文件自己加上了参数。

如果要直接使用seller.id 来获取id的话，需要使用assign来拓展属性。

输出结果是123123。说明可以直接使用seller.id取到url的id值了。

。下面开始建立缓存

localstorage要与商品不同的id关联起来才可以，不能直接写。

建立一个管理数据存取的js文件  store.js  。

使用：

引入这两个方法

在转换收藏状态的函数下面引入方法储存状态

测试：

如果是第一次收藏之前，没有创建seller的情况下，控制台输入localStorage发现__seller__字段长度为1，只有一个warn,而收藏之后，seller字段长度变为2，出现seller字段为

再次刷新页面，依然保持收藏状态。

而取消收藏之后，seller字段为：

key的值变为false了。

再次刷新依然为未收藏。

设置localstroge成功。