同步列表,登录状态,未登录状态,用户编辑时
利用store的state中的user.来判断用户是否登录,
没有登录,就保存到本地中,等录保存在网络中.
if (this.user) {
try {
const { data } = await userChines();
this.chennls = data.data.channels;
} catch (err) {
console.log(err);
}
} else {
const data = getItem("Userinfo");
if (data) {
this.chennls = data;
} else {
try {
const { data } = await userChines();
this.chennls = data.data.channels;
} catch (err) {
console.log(err);
}
}
}
,保存之后再取出来,同步,同样也是判断用户是否登录,同样要判断用户是删除还是跳转
async addchannle(value) {
this.tabber.push(value);
if (this.user) {
try {
await postuserinfo({
id: value.id,
seq: this.tabber.length,
});
} catch (err) {
console.log(err);
}
} else {
setItem("Userinfo", this.tabber);
}
},
async removechannle(channle) {
if (this.user) {
try {
await removeuserinfo(channle.id);
} catch (err) {
console.log(err);
}
} else {
setItem("Userinfo", this.tabber);
}
},
搜索功能,点击搜索按钮,跳转页面,搜索页面,有三个子组件,历史记录,搜索页面,关联页面,
利用v-if v-else-if v-else来进行显示
声明一个变量,isshow:true
关联页面,input有内容,就显示,v-else-if ="input.trim().length!==0"
l历史记录 v-else
input输入内容时,关联页面要显示,所联动到的内容也要显示.用到监听
由于监听是只要输入内容就会监听,当我们发送请求时,没输入一次就会发送一次请求.太消耗性能.我们要利用防抖,减少发送次数.
防抖利用组件lodash 中的debounce
下载组件,引用组件
debounce第一个参数是函数,第二个函数是时间
watch: {
searchItem: {
handler:
// console.log(val);
debounce(function (val) {
this.getseachinfo(val);
}, 200),
immediate: true,
},
},
获取的数据.放入空变量中,进行渲染,输入内容时,所写入的关键字,要有一个变红的效果,
把input的内容取出来,进行遍历出来,进行变红,再放进去.
const header = `<span style="color:red">${this.searchItem}</span>`;
const data = new RegExp(this.searchItem, "gi");
return text.replace(data, header);
当我们点击关联出来的数据,要渲染到input中,添加一个点击事件,把数据传过去,并渲染到上面,此时要发送请求把准确的数据拿出来,进行渲染到list中,实现数据的懒加载,和更新
async onLoad() {
try {
const { data } = await getinfotion({
page: this.page,
per_page: this.per_page,
q: this.searchItem,
});
const { results } = data.data;
this.list = [...this.list, ...results];
this.loading = false;
if (results.length) {
this.page++;
} else {
this.finished = true;
}
} catch (err) {
console.log(err);
this.loading = false;
}