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

uniapp vue3中使用pinia 和 pinia持久化（没有使用ts）

web 2025/8/13 9:42:57

uniapp vue3中使用pinia（没有使用ts）

一、安装 Pinia

打开终端，进入你的 Uniapp 项目根目录，执行以下命令安装 Pinia：

npm install pinia
# 或者使用 yarn
yarn add pinia

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

在 main.js（Vue3 项目的入口文件）中配置并使用 Pinia：

import { createSSRApp } from 'vue'
import pinia from 'pinia'
import App from './App.vue'export function createApp() {const app = createSSRApp(App)app.use(pinia) // 注册 Piniareturn {app}
}*******************************上面报错？用下面这个************************************
--------------------------------------------------------------------------------------import { createSSRApp } from 'vue'
// 引入 createPinia 方法（命名导出）
import { createPinia } from 'pinia'
import App from './App.vue'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'export function createApp() {const app = createSSRApp(App)// 创建 Pinia 实例const pinia = createPinia()// 注册 Pinia 持久化pinia.use(piniaPluginPersistedstate) // 注册 Piniaapp.use(pinia)return {app}
}

对于 script setup 语法糖的单文件组件，上述代码中 createApp 函数是用于服务端渲染（SSR）场景下的写法，如果是纯客户端渲染（CSR），也可以这样写：

import { createApp } from 'vue'
import pinia from 'pinia'
import App from './App.vue'const app = createApp(App)
app.use(pinia)
app.mount('#app')

三、创建 Store（仓库）

在项目中创建一个 store 目录（建议放在 src 目录下），用于存放各个 Store 文件。

例如，创建一个名为 userStore.js 的 Store 文件，用来管理用户相关的状态：

import { defineStore } from 'pinia'// 第一个参数是该 Store 的唯一 ID
export const useUserStore = defineStore('user', {// 存储状态，类似于 Vuex 中的 statestate: () => ({userInfo: null, // 用户信息token: '', // 用户登录 tokenisLoggedIn: false // 用户是否登录状态}),// 计算属性，类似于 Vuex 中的 gettersgetters: {getUserName: (state) => state.userInfo?.name || '未登录用户',},// 方法，类似于 Vuex 中的 mutations 和 actions（在 Pinia 中不做严格区分）actions: {setUserInfo(info) {this.userInfo = info;this.isLoggedIn = true;},setToken(token) {this.token = token;},logout() {this.userInfo = null;this.token = '';this.isLoggedIn = false;}}
})

四、在组件中使用 Store

在普通 Vue 组件中使用：

<template><div><button v-if="!isLoggedIn" @click="login">登录</button><button v-if="isLoggedIn" @click="logout">退出登录</button><p>用户名: {{ userName }}</p></div>
</template><script setup>
import { useUserStore } from '@/store/userStore.js'const userStore = useUserStore()
const isLoggedIn = userStore.isLoggedIn
const userName = userStore.getUserNameconst login = () => {// 模拟登录成功后设置用户信息和 tokenconst mockUserInfo = { name: 'John Doe' }const mockToken = '1234567890'userStore.setUserInfo(mockUserInfo)userStore.setToken(mockToken)
}const logout = () => {userStore.logout()
}
</script>

在 script setup 语法糖的组件中使用（结合 toRefs 简化响应式数据的使用）：

<template><div><button v-if="!isLoggedIn" @click="login">登录</button><button v-if="isLoggedIn" @click="logout">退出登录</button><p>用户名: {{ userName }}</p></div>
</template><script setup>
import { useUserStore } from '@/store/userStore.js'
import { toRefs } from 'vue'const userStore = useUserStore()
const { isLoggedIn, getUserName: userName } = toRefs(userStore)const login = () => {const mockUserInfo = { name: 'John Doe' }const mockToken = '1234567890'userStore.setUserInfo(mockUserInfo)userStore.setToken(mockToken)
}const logout = () => {userStore.logout()
}
</script>

三、持久化 Store 数据（可选）

在实际应用中，你可能希望在页面刷新后 Store 中的数据不会丢失，这时可以使用插件来实现持久化，比如 pinia-plugin-persistedstate。

先安装插件：

npm install pinia-plugin-persistedstate
# 或使用 yarn
yarn add pinia-plugin-persistedstate

然后在 main.js 中引入并注册插件：

// 如果不对可以看（ 二、配置 Pinia 并在项目中引入 ）
import { createSSRApp } from 'vue'
import pinia from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'export function createApp() {const app = createSSRApp(App)pinia.use(piniaPluginPersistedstate) // 注册持久化插件app.use(pinia)return {app}
}

接着，在 Store 中配置持久化：

import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({userInfo: null,token: '',isLoggedIn: false}),getters: {getUserName: (state) => state.userInfo?.name || '未登录用户',},actions: {setUserInfo(info) {this.userInfo = info;this.isLoggedIn = true;},setToken(token) {this.token = token;},logout() {this.userInfo = null;this.token = '';this.isLoggedIn = false;}},persist: true // 开启持久化，数据会自动存储到 localStorage 中，也可以配置其他参数
})