当前位置：首页 > news >正文

uniapp中pinia（setup语法）使用流程

news 2025/9/27 7:39:59

uniapp中pinia（setup语法）的使用流程

一、安装pinia

pnpm install pinia

二、配置pinia并在项目中引入

在main.js中配置pinia

import {createSSRApp} from "vue"; //可以创建实例
import pinia from './stores' 
import App from "./App.vue";
export function createApp() {const app = createSSRApp(App); // 创建一个vue实例app.use(pinia)  //注册pinia（将pinia注入vue实例中）return {app,};
}

三、使用pinia

创建stores文件夹，下方包含index.js和modules文件夹

index.js是各个store的入口文件，可以统一导出所有store
modules文件夹中存放的是多个独立的pinia store，可以为各个模块创建store存储数据

index.js

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)// 默认导出，给 main.ts 使用
export default pinia

各个模块的store

import {defineStore} from 'pinia'
import {ref} from 'vue'export const useUserStore = defineStore('user',()=>{// 变量const profile = ref({token:'',userInfo:{},introduce:''})// 方法const setToken = (token)=>{profile.value.token = token}const setIntroduce = (introduce)=>{profile.value.introduce = introduce}const setProfile = (profileValue)=>{profile.value.userInfo = profileValue}const delProfile = ()=>{profile.value = {}}// 必须要返回出去return {profile,setToken,setIntroduce,setProfile,delProfile}},{// 持久化 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {return uni.setStorageSync(key, value)},},},}
)

defineStore函数结构
在这里插入图片描述

四、pinia持久化（各个端如何实现）

没有持久化，用户每次打开应用都是 “全新的初始状态”；有了持久化，用户的登录状态、购物车、个性化设置才能 “记住”，这是绝大多数应用的基础需求。

persist介绍
在这里插入图片描述

网页端和App端

import {defineStore} from 'pinia'
import {ref} from 'vue'export const useUserStore = defineStore('user',()=>{// 变量const profile = ref({token:'',userInfo:{},introduce:''})// 方法const setToken = (token)=>{profile.value.token = token}const setIntroduce = (introduce)=>{profile.value.introduce = introduce}const setProfile = (profileValue)=>{profile.value.userInfo = profileValue}const delProfile = ()=>{profile.value = {}}// 必须要返回出去return {profile,setToken,setIntroduce,setProfile,delProfile}},{// 持久化 小程序端配置persist:true}
)

微信小程序端
由于persist默认使用的是localStorage，而小程序使用的是getStorageSync和setStorageSync所以需要重新配置。

import {defineStore} from 'pinia'
import {ref} from 'vue'export const useUserStore = defineStore('user',()=>{// 变量const profile = ref({token:'',userInfo:{},introduce:''})// 方法const setToken = (token)=>{profile.value.token = token}const setIntroduce = (introduce)=>{profile.value.introduce = introduce}const setProfile = (profileValue)=>{profile.value.userInfo = profileValue}const delProfile = ()=>{profile.value = {}}// 必须要返回出去return {profile,setToken,setIntroduce,setProfile,delProfile}},{// 持久化 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {return uni.setStorageSync(key, value)},},},}
)