uni-APP学习日记7

收藏功能实现

uni-app阻止冒泡

	<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)
			}

2. 父组件接收，每隔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)
				}
			},

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

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

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

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

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