uniapp黑马项目总结( 三 ) _前端组件

搜索
搜索框自动获取焦点
这个项目的搜索框的实现是先用一个view然后再点击跳转到搜索页面实现的，所以跳转后自动获取焦点，以增强用户体验
在中的uni--bar中uni--bar.vue中， data中的show与的值改为true即可，但是这里直接改源码不好
搜索框的防抖
经典防抖，每次输入后， 500毫秒内要是有新的输入事件，再不断重启延时器
input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器，并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值this.kw = e.valueconsole.log(this.kw)}, 500)}
关键字数组的顺序
最近搜索的应该放在前面，可以用计算属性，再把这个数组复制一下再反转
computed: {historys() {// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序// 而是应该新建一个内存无关的数组，再进行 reverse 反转return [...this.historyList].reverse()}}
解决关键词重复问题
在保存关键词为历史记录的方法中，把这个数组转为set对象，因为set对象没有重复的元素
再移除对应元素，再添加元素，再转为数组即可
// 保存搜索关键词为历史记录saveSearchHistory() {// this.historyList.push(this.kw)// 1. 将 Array 数组转化为 Set 对象const set = new Set(this.historyList)// 2. 调用 Set 对象的 delete 方法，移除对应的元素set.delete(this.kw)// 3. 调用 Set 对象的 add 方法，向 Set 中添加元素set.add(this.kw)// 4. 将 Set 对象转化为 Array 数组this.historyList = Array.from(set)}
数据的持久化存储
把对象用JSON.转为json ，存在本地
uni.setStorageSync('kw', JSON.stringify(this.historyList))
把json用JSON.parse转为对象,拿到数据
onLoad() {this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')}
再练习vuex
在根目录下store中store.js
导入vue与vuex ，再安装为vue插件，创建store实例对象，向外暴露store对象，也可以使用别的模块中的数据
// 1. 导入 Vue 和 Vueximport Vue from 'vue'import Vuex from 'vuex'// 2. 将 Vuex 安装为 Vue 的插件Vue.use(Vuex)// 3. 创建 Store 的实例对象const store = new Vuex.Store({// TODO：挂载 store 模块modules: {m_cart: moduleCart,},})// 4. 向外共享 Store 的实例对象export default store
最后再从入口文件中把store挂载到vue实例上
// 1. 导入 store 的实例对象import store from './store/store.js'const app = new Vue({...App,// 2. 将 store 挂载到 Vue 实例上store,})app.$mount()
为了模块化，我们可以再建cart.js ，为了语义化，可以开启命名空间