收藏功能实现

<view class="icons" @click.stop="likeTap">		<!-- @click.stop 阻止自定义组件冒泡 -->

**

## *addToSet*

**
数组更新操作符。原子操作。给定一个或多个元素，除非数组中已存在该元素，否则添加进数组。
*******************************************************************
示例代码 1：添加一个元素
如果 tags 数组中不包含 database，添加进去

const dbCmd = db.command
let res = await db.collection('todos').doc('doc-id').update({
data: {
tags: dbCmd.addToSet('database')
}
})
*******************************************************************
示例代码 2：添加多个元素
需传入一个对象，其中有一个字段 each，其值为数组，每个元素就是要添加的元素

const dbCmd = db.command
let res = await db.collection('todos').doc('doc-id').update({
data: {
tags: dbCmd.addToSet({
each: ['database', 'cloud']
})
}
})

搜索页面

vuex管理历史记录

***

## store文件夹下

***
// Vuex 状态管理

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store =new Vuex({

})

export default store

***

## 在main.js注册

***
import Vue from 'vue'
import App from './App'
import api from './common/api'
import store from './store'//************

Vue.config.productionTip = false
Vue.prototype.$api=api

App.mpType = 'app'

const app = new Vue({
store,//**********
...App
})
app.$mount()

究极体

// Vuex 状态管理

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store =new Vuex.Store({
// 数据源
state:{
// 本地缓存搜索历史
historyList:uni.getStorageSync("_history")||[]//先取本地缓存的数据，没有数据则为空
},
mutations:{//类似methods，放置方法的
SET_HISTORY_LIST(state,history){
state.historyList=history
},
CLEAR_HISTORY(state){
state.historyList=[]
}
},
actions:{//有点像main函数，供外界调用
set_history({commit,state},history){
let list=state.historyList
list.unshift(history)
uni.setStorageSync('_history',list)//会覆盖掉原来该 key 对应的内容，这是一个同步接口
commit('SET_HISTORY_LIST',list)
},
clearHistory({commit}){
uni.removeStorageSync('_history')
commit('CLEAR_HISTORY')
}
}
})

export default store

搜索页面的调用

//**********先引用************************
import {
mapState
} from 'vuex'

//*************methods中调用******************
setHistory() {
this.$store.dispatch('set_history', {
name: this.value
})
},
clear(){
this.$store.dispatch('clearHistory')
uni.showToast({
title:'已清空搜索历史'
})
},

自定义搜索组件与搜索页面的value绑定

1. 子组件获取输入框的值，发送给父组件

<input type="text" class="navbar-search_text" value="" placeholder="————新开的游泳馆？" v-model="val" @input="inputChange" />

inputChange(e) {
const {
value
} = e.detail
this.$emit('input',value)
}

1. 父组件接收，每隔700ms搜索一次

<navbar :isSearch="true" v-model="value" @input="input"></navbar>

input(value) {
console.log('键盘输入：', value)
if (!value) {
clearTimeout(this.timer)
this.mark = false
this.getSearch(value)
return
}
// 做定时标记mark 不会在页面渲染，不用在data中声明
if (!this.mark) {
this.mark = true
this.timer = setTimeout(() => {
this.mark = false
this.getSearch(value)
}, 700)
}
},

1. 子组件实时接收父组件

//******功能：点击历史标签进入搜索*************
props: {
isSearch: {
type: Boolean,
default: false
},
value:{
type:[String,Number],
default:''
}
},

watch:{
value(newVal){
this.val=newVal
}
},
**************v-modle双向数据绑定，将标签内容显示在搜素框***************

1. 卡片组件在点击后添加标签

open(){
this.$emit('FromCard',this.item)
}