经验

TypeScript 项目

为什么要使用 Typescript

项目使用 TypeScript 的好处在于：

• 编写代码时有属性提示，这让开发过程更加安全高效
• IDE 静态分析和编译类型校验

IMPORTANT

小型项目中 ts 的类型提示作用不大，因为数据的结构并不复杂。

在本项目中后端返回的数据中，有包括页码数据、商品数据、用户信息等杂糅在一起的复杂结构，这种情况下如果没有类型提示，前端开发人员很容易搞不清楚数据的归属和其语义.

Typescript 类型声明

使用 ts 需要配置 .tsconfig 文件，在其中声明编译选项等。

比如，在 uniapp 项目中，需要在其中配置类型声明文件：

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }
}

而业务代码的类型声明文件，可以在 /src/types 中存放，后缀一般为 .d.ts. 使用时导入该声明文件即可：

import type { AddressDetail, AddressParams } from '@/types/address'

坑

使用 vue3 响应式声明一个对应类型的对象，以接收从后端返回的数据，这是非常常见的用法。 如果这个数据与表单数据双向绑定，注意其初始化状态。

const profileData = ref({} as ProfileRusult) 
const profileData = ref<ProfileRusult>()  

TIP

获取用户个人信息，修改个人信息时要修改这个数据。v-model必须能访问到，所以必须要有初始值，不能直接那样直接写 ref<result>()初始化一个空对象。不然会报错。

全局状态管理 - Pinia

VueX 和 Pinia

Vuex 主要包含以下几个核心概念：

• State：用于存储全局状态。
• Getter：用于从 State 中派生出一些状态，例如计算属性。
• Mutation：用于同步修改 State，严格遵循单向数据流。
• Action：用于异步操作，可以包含异步 API 请求、异步提交 Mutation 等。

INFO

在 VueX 中修改 state 的唯一方式就是显式地提交 mutation，虽然可以直接对其赋值修改，但 vuex 跟踪不到这个变化。

Pinia 可以理解为就是 Vuex5，是一个轻量级的、兼容 Vue 3 和 Vue 2 的状态管理库。Pinia 和 VueX 主要区别是废弃了经常被认为是极其冗余的 mutation。可以创建和使用多个 Store 实例，每个 Store 都有自己独立的状态和方法。

持久化

pinia-plugin-persistedstate 插件实现持久化，这个插件默认使用 localStorage 实现持久化。

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

小程序端不兼容，所以必须自定义修改插件配置，这里存储数据必须是同步的。

storage

• 类型：StorageLike
• 默认值：localStorage

将数据持久化到 storage 中，必须具有 getItem: (key: string) => string | null 和 setItem: (key: > string, value: string) => void 两个方法。

uni-app 支持多端的持久化 API是 uni.setStorageSync()和uni.getStorageSync()。

// persist: true,
    persist: {
      // 默认只有网页端的 getter 和 setter
      // 必须提供小程序对应的 storage.setItem, storage.getItem 接口
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
        getItem(key) {
          return uni.getStorageSync(key)
        },
      },
    },

持久化存储配置完成后，就会自动将用户数据保存在客户端，即使用户关闭了小程序，数据依然可以保留。