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

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) // 注册 Pinia
  return {
    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) 
  // 注册 Pinia
  app.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 中的 state
  state: () => ({
    userInfo: null, // 用户信息
    token: '', // 用户登录 token
    isLoggedIn: false // 用户是否登录状态
  }),
  // 计算属性，类似于 Vuex 中的 getters
  getters: {
    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.getUserName

const login = () => {
  // 模拟登录成功后设置用户信息和 token
  const 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 中，也可以配置其他参数
})

通过以上步骤，你就可以在 Uniapp Vue3 项目中使用 Pinia 进行高效的状态管理了。