Pinia 状态管理

Pinia 是什么？

Pinia 是 Vue 的官方状态管理库，就像 Vuex 的升级版，用来在组件之间共享数据（比如登录用户、token、购物车等）。

简单说： 你可以把它理解为"全局变量仓库"，用来保存跨组件共享的变量，比如登录状态、token、用户信息等等。

| 存储方式 | 特点 | | ---------------- | --------------------- | | localStorage | 持久化存储，关掉页面不会消失 | | sessionStorage | 临时存储，刷新后还在，但关闭页面会清除 | | pinia（内存） | 页面一刷新就没了，适合临时状态配合持久存储 |

---

举个例子：token 的 Pinia 写法

// token.js
import { defineStore } from 'pinia'

export const useTokenStore = defineStore('token', {
  state: () => ({
    token: ''
  }),
  actions: {
    setToken(newToken) {
      this.token = newToken
    },
    removeToken() {
      this.token = ''
    }
  }
})

然后你可以在任何组件或文件中这样用它：

const tokenStore = useTokenStore()
tokenStore.setToken('abc123')
console.log(tokenStore.token) // 打印 abc123

---

Pinia 保存的"有效期"是多久？

默认情况下：

Pinia 存的数据是保存在内存里的 —— 页面一刷新就没了！

所以你这个项目里应该还有类似这种写法来"持久化" token：

// 初始化时，从 localStorage 读取
token: localStorage.getItem('token') || ''

想让 Pinia 的状态持久保存（刷新也不丢）？

你可以使用一个插件叫 pinia-plugin-persistedstate：

npm install pinia-plugin-persistedstate

然后配置：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

在你的 store 里加上：

export const useTokenStore = defineStore('token', {
  state: () => ({
    token: ''
  }),
  persist: true
})

这样它就会自动把数据保存到 localStorage，页面刷新也不会丢了

---

总结一下：

|问题|答案| |---|---| |Pinia 是干嘛的？|Vue 的状态管理工具（全局变量仓库）| |保存在哪里？|默认保存在内存（刷新就没）| |怎么持久保存？|用 localStorage / 或配合 pinia 插件| |和 Vuex 区别？|更简单、更轻量、更官方推荐（Vue3 专用）|