。将收藏状态缓存到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成功。
用绑定不同class的方法来做：<span v-bind:class="{'left': isClose, 'right': isOpen} switcher" v-on:click="switcher"></span>
<!--这个span就是圆形开关，点击的时候触发switcher方法-->
在vue实例中写入标记和开关方法：
data: {
isClose: true,
isOpen: false//假设默认关闭
},
methods: {
switcher: function() {
//实现开关切换
isClose = !isClose
isOpen = !isOpen
}
}
css样式：
.switcher {
transition: left 0.8s
}
.left {
left: 0
}
.right {
left: 50px//移动50px
}
这样就能通过点击时改变css属性，并配合transition来实现动态开关了。
<template>
<div>
<h1>goods</h1>
<el-button type="danger" plain @click="del">批量删除</el-button>
<!-- 提示框的颜色 有light和dark -->
<el-table
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:row-key="row=>row.goods_id"
>
<el-table-column
type="selection" width="55"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
prop="add_time"
label="添加时间"
width="120"
></el-table-column>
<el-table-column prop="goods_id" label="商品id" width="120">
<template slot-scope="scope">
<el-tag>{{ scope.row.goods_id }}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="goods_name"
label="商品名称"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="goods_number" label="商品数量" width="120">
</el-table-column>
<el-table-column prop="goods_price" label="商品价格" width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { menusGet, delDelete } from "@/http/request.js"
export default {
data() {
return {
pagenum: 1,
pagesize: 10,
query: "",
tableData: [],
multipleSelection: [],
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val
},
/* 批量删除 */
del() {
console.log(delDelete)
.then(()=>{
this.multipleSelection.forEach((r,i) =>{
console.log(r.goods_id)
delDelete(`goods/${r.goods_id}`,{
id:r.goods_id
}).then((res) =>{
let {meta} = res.data
if(meta.status==200&&(i+1)==this.multipleSelection.length){
this.$message.success(meta.msg)
/* 删除数据后，重新渲染页面 */
this.showTable()
}
})
})
})
/* 点击取消走catch */
.catch(()=>{
this.$message.warning('谢谢你的手下留情')
})
},
showTable() {
menusGet("goods", {
pagenum: this.pagenum,
pagesize: this.pagesize,
query: this.query,
})
.then((res) =>{
console.log(res)
let { meta, data } = res.data
if (meta.status == 200) {
this.tableData = data.goods
}
})
.catch((err) =>{
console.log(err)
})
},
},
created() {
this.showTable()
},
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）