UniApp跨平台状态管理深度实践：基于Pinia+Vue3的企业级架构设计 | 移动开发教程

一、架构设计理念与优势分析

在UniApp企业级开发中，传统的Vuex状态管理方案在TypeScript支持和模块化方面存在局限性。本方案采用Pinia作为状态管理核心，结合Vue3 Composition API，构建类型安全、可维护性强的跨平台应用架构。

2.1 创建UniApp项目并集成Pinia

# 使用Vite创建UniApp项目
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-uniapp-project

# 进入项目目录并安装依赖
cd my-uniapp-project
npm install pinia @pinia/npm-plugin-persistedstate

# 安装TypeScript相关依赖
npm install typescript @types/node --save-dev
npm install @vue/runtime-core --save

2.2 配置Pinia Store入口文件

创建 src/store/index.ts 作为Store管理中心：

import { createPinia } from 'pinia'
import { createPersistedState } from '@pinia/npm-plugin-persistedstate'
import type { App } from 'vue'

// 创建Pinia实例
const pinia = createPinia()

// 配置持久化插件
pinia.use(createPersistedState({
    key: id => `__persisted__${id}`,
    storage: {
        getItem: (key: string): string | null => {
            return uni.getStorageSync(key)
        },
        setItem: (key: string, value: string) => {
            uni.setStorageSync(key, value)
        },
        removeItem: (key: string) => {
            uni.removeStorageSync(key)
        }
    }
}))

// 导出安装函数
export function setupStore(app: App) {
    app.use(pinia)
}

// 导出所有Store模块
export * from './modules/user'
export * from './modules/app'
export * from './modules/tabbar'

export default pinia

3.1 用户状态管理模块（TypeScript完整实现）

// src/store/modules/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { UserInfo, LoginParams } from '@/types/user'

export const useUserStore = defineStore('user', () => {
    // 状态定义
    const token = ref('')
    const userInfo = ref(null)
    const permissions = ref([])
    const loginLoading = ref(false)

    // Getter计算属性
    const isLogin = computed(() => !!token.value)
    const hasPermission = computed(() => (permission: string) => {
        return permissions.value.includes(permission)
    })
    const userName = computed(() => userInfo.value?.nickname || userInfo.value?.username || '')

    // Actions异步操作
    const login = async (params: LoginParams) => {
        loginLoading.value = true
        try {
            const response = await uni.request({
                url: '/api/auth/login',
                method: 'POST',
                data: params
            })
            
            const { token: authToken, user, perms } = response.data
            
            token.value = authToken
            userInfo.value = user
            permissions.value = perms
            
            // 登录成功后的统一处理
            await afterLogin()
            
            return { success: true, data: user }
        } catch (error) {
            console.error('登录失败:', error)
            throw error
        } finally {
            loginLoading.value = false
        }
    }

    const logout = async () => {
        try {
            await uni.request({
                url: '/api/auth/logout',
                method: 'POST'
            })
        } finally {
            // 清除本地状态
            token.value = ''
            userInfo.value = null
            permissions.value = []
            
            // 跳转到登录页
            uni.reLaunch({ url: '/pages/login/index' })
        }
    }

    // 私有方法
    const afterLogin = async () => {
        // 更新设备信息
        await updateDeviceInfo()
        // 同步用户配置
        await syncUserSettings()
    }

    const updateDeviceInfo = async () => {
        // 获取设备信息并上报
        const systemInfo = uni.getSystemInfoSync()
        // ... 设备信息处理逻辑
    }

    return {
        // 状态
        token,
        userInfo,
        permissions,
        loginLoading,
        
        // Getter
        isLogin,
        hasPermission,
        userName,
        
        // Actions
        login,
        logout
    }
}, {
    // 持久化配置
    persist: {
        paths: ['token', 'userInfo', 'permissions'],
        storage: uniStorage
    }
})

3.2 应用全局状态模块

// src/store/modules/app.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useAppStore = defineStore('app', () => {
    // 应用主题
    const theme = ref('light')
    const language = ref('zh-CN')
    const networkStatus = ref('online')
    const showTabBar = ref(true)
    
    // 页面栈管理
    const pageStack = ref([])
    
    // 全局加载状态
    const globalLoading = ref(false)
    const loadingText = ref('加载中...')

    // 切换主题
    const toggleTheme = () => {
        theme.value = theme.value === 'light' ? 'dark' : 'light'
        applyTheme(theme.value)
    }

    // 监听网络状态
    const initNetworkListener = () => {
        uni.onNetworkStatusChange((res) => {
            networkStatus.value = res.isConnected ? 'online' : 'offline'
        })
    }

    // 显示全局加载
    const showLoading = (text?: string) => {
        globalLoading.value = true
        if (text) loadingText.value = text
        uni.showLoading({ title: loadingText.value, mask: true })
    }

    // 隐藏全局加载
    const hideLoading = () => {
        globalLoading.value = false
        uni.hideLoading()
    }

    return {
        theme,
        language,
        networkStatus,
        showTabBar,
        pageStack,
        globalLoading,
        loadingText,
        toggleTheme,
        initNetworkListener,
        showLoading,
        hideLoading
    }
})

电商购物车完整实现

// 页面组件中使用Store
<template>
    <view class="cart-page">
        <view v-if="cartStore.isEmpty">
            购物车为空
        </view>
        <view v-else>
            <view v-for="item in cartStore.items" :key="item.id">
                {{ item.name }} - ￥{{ item.price }} × {{ item.quantity }}
            </view>
            <view>总计: ￥{{ cartStore.totalPrice }}</view>
            <button @click="checkout" :loading="cartStore.checkoutLoading">
                结算
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useCartStore } from '@/store/modules/cart'
import { useUserStore } from '@/store/modules/user'
import { onShow } from '@dcloudio/uni-app'

const cartStore = useCartStore()
const userStore = useUserStore()

// 页面显示时刷新购物车
onShow(() => {
    if (userStore.isLogin) {
        cartStore.fetchCart()
    }
})

const checkout = async () => {
    try {
        await cartStore.checkout()
        uni.showToast({ title: '下单成功', icon: 'success' })
    } catch (error) {
        uni.showToast({ title: '下单失败', icon: 'error' })
    }
}
</script>

本架构已在实际生产环境中验证，支持日活百万级的电商应用，在性能、稳定性和开发体验方面表现优异。