仓库的数据 只有一点点
var state={
list:[]
}
var mutations={
setData(state,arr){
state.list=arr
}
}
var store=new Vuex.Store({
state,
mutations
})
// 抛出对象
export default store
收藏功能页
<template>
<div>
<button @click="send()">返回首页</button>
<button @click="edit()">
<span v-show="flag">收藏</span>
<span v-show="!flag">取消收藏</span>
</button>
<!-- 输出对象是obj.属性名 -->
<div class="item-2">
<ul>
<li>
<h3>{{obj.edit}}</h3>
<b>{{obj.active}}</b>
<a href="#">{{obj.name}}</a>
<p>
<a href="#">{{obj.cart}}</a>
<i href="#">{{obj.save}}</i>
</p>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:"Save",
data(){
return{
// 这里是对象
obj:{},
flag:""
}
},
created(){
// 获取前面接收的数据
var id=this.$route.query.id
// 将仓库的数据保存到list
var list=this.$store.state.list
// 根据ID得到键值
var index=list.findIndex((item)=>{
return item.id==id
})
this.obj=list[index]
// 找到ID在localoage中的索引
var col=JSON.parse(localStorage.getItem("save"))||[]
var k=col.findIndex((item)=>{
return item.id==id
})
// 如果找到这个值
if(k>=0){
this.flag=false
}else{
this.flag=true
}
},
methods:{
send(){
this.$router.go(-1)
},
edit(){
// 将接收到的数据保存到变量obj中
var obj={"id":this.obj.id}
// 本地存储获取
var arr=JSON.parse(localStorage.getItem("save"))||[]
if(this.flag){
// 收藏
// 将obj的数据添加到arr中
arr.push(obj)
}else{
// 取消收藏
var index=arr.findIndex((item)=>{
return item.id==this.obj.id
})
arr.splice(index,1)
}
// 数据添加后需要保存到本地存储
localStorage.setItem("save",JSON.stringify(arr))
this.flag=!this.flag
}
}
}
</script>
