uni-app操作笔记

持久化存储到本地

// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
  uni.setStorageSync('kw', JSON.stringify(this.historyList))

//取值
  this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')

过滤器处理价格

filters: {
  // 把数字处理为带两位小数点的数字
  tofixed(num) {
    return Number(num).toFixed(2)
  }
}

<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>

展开运算符

// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
  this.goodsList = [...this.goodsList, ...res.message.goods]

节流阀防止发起额外的请求

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

// 获取商品列表数据的方法
async getGoodsList(cb) {
  this.isloading = true
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  this.isloading = false
  // 只要数据请求完毕，就立即按需调用 cb 回调函数
  cb && cb()

  if (res.meta.status !== 200) return uni.$showMsg()
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

// 触底的事件
onReachBottom() {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')

  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return

  this.queryObj.pagenum += 1
  this.getGoodsList()
}

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []

  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

配置 vuex

1. 在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块

2. 在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件：

3. 在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：

　　// 1. 导入 Vue 和 Vuex
　　import Vue from 'vue'
　　import Vuex from 'vuex'

　　// 2. 将 Vuex 安装为 Vue 的插件
　　Vue.use(Vuex)

　　// 3. 创建 Store 的实例对象
　　const store = new Vuex.Store({
  　　// TODO：挂载 store 模块
  　　modules: {},
　　})

　　// 4. 向外共享 Store 的实例对象
　　export default store
   4. 在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

    // 1. 导入 store 的实例对象
    import store from './store/store.js'

    // 省略其它代码...

　　const app = new Vue({
  　　...App,
  　　// 2. 将 store 挂载到 Vue 实例上
 　　 store,
　　})
　　app.$mount()