uni-app 状态管理实战：Pinia 与请求封装

为什么要状态管理

多页面应用里，登录状态、用户信息、购物车等数据需要全局共享。uni-app 的 Vue3 版本推荐使用 Pinia（Vue 官方状态库），用法和 Web 端一致。

一、安装与初始化

1	npm install pinia

main.js 注册：

// main.js
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(createPinia())
  return { app }
}

二、定义 user store：登录状态

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: uni.getStorageSync('token') || '',
    userInfo: null
  }),

  getters: {
    isLoggedIn: (state) => !!state.token
  },

  actions: {
    setToken(token) {
      this.token = token
      uni.setStorageSync('token', token)
    },

    async login(username, password) {
      // 实际开发走封装好的 request
      const res = await request({ url: '/api/login', method: 'POST', data: { username, password } })
      this.setToken(res.token)
      this.userInfo = res.user
      return res
    },

    logout() {
      this.token = ''
      this.userInfo = null
      uni.removeStorageSync('token')
      uni.reLaunch({ url: '/pages/login/login' })
    }
  }
})

页面中使用：

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
console.log('是否登录：', userStore.isLoggedIn)
</script>

三、统一请求封装：拦截器 + token + 错误处理

一个带拦截器的 request，是跨端项目的标配：

// utils/request.js
const BASE_URL = 'https://api.example.com'

export function request(options) {
  return new Promise((resolve, reject) => {
    const token = uni.getStorageSync('token')

    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
        ...options.header
      },

      success: (res) => {
        // 业务码约定：code === 0 成功
        if (res.statusCode === 200 && res.data.code === 0) {
          resolve(res.data.data)
        } else if (res.statusCode === 401) {
          // token 失效：清登录态回登录页
          uni.removeStorageSync('token')
          uni.reLaunch({ url: '/pages/login/login' })
          reject(new Error('登录已过期'))
        } else {
          uni.showToast({ title: res.data.message || '请求失败', icon: 'none' })
          reject(new Error(res.data.message || '请求失败'))
        }
      },

      fail: (err) => {
        uni.showToast({ title: '网络异常，请检查网络', icon: 'none' })
        reject(err)
      }
    })
  })
}

为什么封装成 Promise：uni.request 是回调式 API，封装后页面里可以 await，配合 async/await 让代码和 Web 端一样清爽：

async function loadOrders() {
  uni.showLoading({ title: '加载中' })
  try {
    const list = await request({ url: '/api/orders' })
    orders.value = list
  } finally {
    uni.hideLoading()
  }
}

四、组合使用：登录 → 存状态 → 跳转

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const username = ref('')
const password = ref('')
const loading = ref(false)

async function handleLogin() {
  if (!username.value || !password.value) {
    uni.showToast({ title: '请输入账号密码', icon: 'none' })
    return
  }
  loading.value = true
  try {
    await userStore.login(username.value, password.value)
    uni.showToast({ title: '登录成功', icon: 'success' })
    setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 500)
  } catch (e) {
    // 错误提示已在 request 里统一处理
  } finally {
    loading.value = false
  }
}
</script>