vue+localStorage+收藏+解析url参数 实例解析
以商家收藏这一功能为例:1. 首先App.vue中根据url 设置好 商家的id<script>import {urlParse} from './common/js/util.js'import Header from './components/header/Header.vue'const err_OK = 0;export default{data(){return
·
以商家收藏
这一功能为例:
1. 首先App.vue中根据url 设置好 商家的id
<script>
import {urlParse} from './common/js/util.js'
import Header from './components/header/Header.vue'
const err_OK = 0;
export default{
data(){
return { /* 商家默认有id */
seller:{
id:(()=>{
/* 从地址栏中的url中通过urlParam函数解析,得到id */
let queryParam = urlParse();
console.log(queryParam);
return queryParam.id;
})()
}
}
},
created(){
this.$http.get('./api/seller?id='+this.seller.id).then((res)=>{
var resData = res.data;
if(resData.errno === err_OK){
/* this.seller = resData.data; 会覆盖掉id */
/* 防止把id覆盖掉,使用es6的一个语法:扩展了对象的属性,在原来的基础上添加response.data的值,不会覆盖掉原来的id属性 */
this.seller = Object.assign({},this.seller,resData.data);
console.log(this.seller.id);
}
},(res)=>{
alert(res.status);
});
},
components: {
'v-header': Header
}
}
</script>
2、seller.vue: 设置和读取localstorage
<div class="favorite" @click="toggleFavorite($event)">
<span class="icon icon-favorite" :class="{'active':favorite}"></span>
<div class="text">{{favoriteText}}</div>
</div>
----
import {saveToLocal,loadFromLocal} from '../../common/js/store.js'
export default{
props:{
seller: {
type: Object
}
},
data(){
return{
favorite: (()=>{
return loadFromLocal(this.seller.id,'favorite',false);
})()
}
},
computed:{
favoriteText(){
return this.favorite? '已收藏': '收藏';
}
},
methods:{
toggleFavorite(event){
if(!event._constructed){
return;
}
this.favorite = !this.favorite;
saveToLocal(this.seller.id, 'favorite', this.favorite);
}
}
}
3、保存的读取localStorage的接口—-store.js:
/**
* [保存数据到localstorage]
* @param {[Number]} id [商家id]
* @param {[type]} key [属性值]
* @param {[type]} value [value值]
* @return {[type]} [description]
*/
export function saveToLocal(id, key, value) {
let seller = window.localStorage.__seller__;
if (!seller) {
seller = {};
seller[id] = {};
} else {
seller = JSON.parse(seller);
if (!seller[id]) {
seller[id] = {};
}
}
seller[id][key] = value;
window.localStorage.__seller__ = JSON.stringify(seller);
};
/**
* [从localstorage读取数据]
* @param {[Number]} id [商家id]
* @param {[type]} key [属性值]
* @param {[type]} def [属性值的默认取值,当没有保存key时,返回默认值]
* @return {[type]} [属性值对应的value值]
*/
export function loadFromLocal(id, key, def) {
let seller = window.localStorage.__seller__;
if(!seller){
return def;
}
seller = JSON.parse(seller);
if(!seller[id]){
return def;
}
let ret = seller[id][key];
return ret || def;
}
4.util.js:
/**
* [解析url参数]
* @example ?id=12345&a=1
* @return Object {id:12345,a:1}
*/
export function urlParse(){
let url = decodeURIComponent(window.location.search);
let obj = {};
let reg = /[?&][^?&]+=[^?&]+/g;
//['?id=12345','a=1']
let arr = url.match(reg);
if(arr){
arr.forEach((item)=>{
let tempArr = item.substring(1).split('=');
let key = decodeURIComponent(tempArr[0]);
let value = decodeURIComponent(tempArr[1]);
obj[key] = value;
})
}
return obj;
}
更多推荐
已为社区贡献5条内容
所有评论(0)