物流D1（司机端app）

1. 拉取项目框架

git clone gitee.com/lotjol/shen…

2. 二次封装网络请求

在 uni-app 中通过 uni.request 发起网络请求，在实际的应用中需要结合一些业务场景进行二次封装，比如配置 baseURL、拦截器等，社区有许多封装好的库，我们在项目中可以拿过来直接使用。

使用代码进行自定义化配置

import { createUniFetch } from 'uni-app-fetch'

// 配置符合自身业务的请求对象
export const uniFetch = createUniFetch({
  loading: { title: '正在加载...' },
  baseURL: 'https://slwl-api.itheima.net',
  intercept: {
    // 请求拦截器
    request(options) {
      // 后续补充实际逻辑
      return options
    },
    // 响应拦截器
    response(result) {
      // 后续补充实际逻辑
      return result
    },
  },
})

2.1 将unifetch导入到其他页面

测试一下封装是否成功

3 轻提示

创建utils专门存放函数 将轻提示封装并export（导出）

export const utils = {
  /**
   * 用户反馈（轻提示）
   * @param {string} title 提示文字内容
   * @param {string} icon 提示图标类型
   */
  toast(title = '数据加载失败！', icon = 'none') {
    uni.showToast({
      title,
      icon,
      mask: true,
    })
  }
}

// 将来可以通过全局的方式访问工具方法
uni.utils = utils

拓展并回顾：uni是全局
uni 是 uni-app 在 App 端（Vue2 引擎） 运行时主动挂在 global（浏览器里叫 window，Node-Runtime 里叫 global）上的一个全局对象。 所以以上代码段中，uni.utils为全局

4 pinia：vue专属的状态管理库

pinia和vuex的功能类似，只是vuex更适配vue2，pinia更适配vue3
npm install pinia

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App'
export function createApp() {
  const app = createSSRApp(App)
  const pina = createPinia()

  app.use(pina)
  return {
    app,
  }
}

4.1 pinia定义store

import { defineStore } from 'pinia'
// 使用ref定义一个响应式数据
import { ref } from 'vue'
// 两个参数,一个为counter,一个为箭头函数
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  // 目的是外部能访问count这个响应式数据

  function increment() {
    count.value++
  },
  function.decrement() {
    count.value--
  }
  return { count, increment, decrement }
})

页面中验证其为响应式：

<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCountStore();
// console.log(store.counter);
</script>
<template>
    <view class="counter">
        <button class="button" @click="store.decrement" type="primary">-</button>
        <input class="input" :value="store.count" type="text" />
        <button class="button" @click="store.increment" type="primary">+</button>
    </view>
</template>

4.2 pinia持久化

例如：token

pinia-plugin-persistedstate

4.2.1 pinia的store可以做选项式的，也可以使用组合式的,以下的就是组合式api

引入piniaPluginPersistedstate

import { defineStore } from 'pinia'
// 使用ref定义一个响应式数据
import { ref } from 'vue'
// 三个参数,一个为counter,一个为箭头函数
export const useCounterStore = defineStore('counter',
  // 第二个参数:函数
  () => {
    const count = ref(0)
    // 目的是外部能访问count这个响应式数据

    function increment() {
      count.value++
    }

    function.decrement() {
      count.value--
    }

    return { count, increment, decrement }

  },
  // 第三个参数
  {
    // 导出
    persist: true
  })

4.2.2 高级用法

createPersistedState:可以自定义：

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
// 导入pinia持久化
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 1.  引入自定义的pinia'createPersistedState'
import { createPersistedState } from 'pinia-plugin-persistedstate'
import App from './App'
export function createApp() {
  const app = createSSRApp(App)

  //2. 实例化pinia
  const pina = createPinia()
  // 使用pinia
  // pinia.use(piniaPluginPersistedstate)

  //3. 使用自定义的pinia
  pinia.use(createPersistedState({
    storage: {},
  }))

  app.use(pina)
  return {
    app,
  }
}

4.2.3 pinia中的store的使用

4.2.4 pinia中的key

作用：更加语义化

4.2.5 注意：使用persist；ture的话会将所有东西都存储，消耗性能

可以通过persist：{ path：['count'，'mount']
} 意思是只将count、mount这两个变量进行永久存储

4.3 pinia做的计数器：使用storeToRefs来进行响应式数据的解构。使用export——retrun，将所需的字符和函数导出，供页面使用

import { defineStore } from 'pinia'
// 使用ref定义一个响应式数据
import { ref } from 'vue'
// 三个参数,一个为counter,一个为箭头函数
export const useCounterStore = defineStore('counter',
  // 第二个参数:函数
  () => {
    const count = ref(0)
    // 目的是外部能访问count这个响应式数据

    function increment() {
      count.value++
    }

    function.decrement() {
      count.value--
    }

    return { count, increment, decrement }

  },
  // 第三个参数
  {
    // 导出
    persist: true
  })

在页面中使用封装好的函数和参数，在使用store=useCounterStore实例化，使用store函数内部的数据和方法 如果只是 const {count}=store结构出来：有数据、但是失去响应式

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
// console.log(store.counter);
const { count } = storeToRefs(store);
// store中的方法则直接解构就可以了:
const { decrement, increment } = store;
</script>
<template>
    <view class="counter">
        <button class="button" @click="decrement" type="primary">-</button>
        <input class="input" :value="counter" type="text" />
        <button class="button" @click="increment" type="primary">+</button>
    </view>
</template>