pinia实现持久化

前言

pinia是什么？pinia有什么好处？

pinia是设计一个拥有组合式 API 的 Vue 状态管理库， Vue 的专属状态管理库，它允许你跨组件或页面共享状态

pinia可以实现以下功能：

  • Devtools 支持
    • 追踪 actions、mutations 的时间线
    • 在组件中展示它们所用到的 Store
    • 让调试更容易的 Time travel
  • 热更新
    • 不必重载页面即可修改 Store
    • 开发时可保持当前的 State
  • 插件：可通过插件扩展 Pinia 功能
  • 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
  • 支持服务端渲染

简单概括就是，以后在使用pinia中state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)

pinia 安装

pinia可以通过两种方式来创建，

方法1：可以在创建vue框架时勾选pinia选项

image-20230830111103328

方法2：在已经构建好的vue项目，可以使用以下命令来构建pinia

1
2
3
4
5
yarn add pinia
# 或者使用 npm
npm install pinia
# 或使用pnpm
pnpm add pinia

tips：如果你使用的vue版本低于2.7，还需要安装组合式api包：

1
2
3
4
5
yarn add @vue/composition-api
# 或者使用 npm
npm install @vue/composition-api
# 或使用pnpm
pnpm add @vue/composition-api

安装持久化插件：

1
npm i pinia-plugin-persistedstate

pinia使用并实现持久化

这里推荐把pinia独立出，在store文件夹下新建index.js文件，在文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
// 导入pinia包
import { createPinia } from 'pinia'
// 导入持久化插件
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
// 在pinia中使用持久化
pinia.use(persist)
// 导出pinia，方便在main.js文件中挂载
export default pinia

在main.js中挂载：

1
2
3
4
5
import { createApp } from 'vue'
import pinia from '@/stores/index'
import App from './App.vue'
const app = createApp(App)
app.use(pinia)

这样就为vue构建好了一个pinia组件，那如何使用它呢？

在stores文件夹下新建modules文件夹，用来存放使用pinia的模块，比如user.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { getUser } from '@/api/user.js'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
// 第二个参数可接受两类值：Setup 函数或 Option 对象。
// 第三个对象就是可以用来实现持久化
export const useUserStore = defineStore(
  'big-user',
    //第二个参数，这里是你的一些方法，变量啥的
  () => {
    const token = ref('')
    const setToken = (newToken) => {
      token.value = newToken
    }
    const removeToken = () => {
      token.value = ''
    }

    const user = ref({})
    const getUserInfo = async () => {
      const res = await getUser()
      user.value = res.data.data
    }
    const setUser = (obj) => {
      user.value = obj
    }
    // 导出vue组件用到的方法
    return {
      token,
      setToken,
      removeToken,
      user,
      getUserInfo,
      setUser
    }
  },
   // 第三个参数，通过persist开启持久化
  {
    persist: true
  }
)

在user.js添加完自己需要的代码之后，需要在stores/index.js暴露出去供组件使用：

1
2
3
4
5
6
7
8
9
10
11
12
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia
// 这里是导入并暴露单个方法或者参数
// import { useUserStore } from './modules/user'
// export { useUserStore }
// 这里是自动导入并暴露vue组件用到的方法参数
export * from './modules/user'

在vue组件中，可以这样使用这些方法或者参数：

1
2
3
4
5
6
7
8
9
<script>
// 导入pinia
import { useUserStore } from '@/stores'
// 使用useUserStore（你user.js定义的名称）
const useStore = useUserStore()
// 这样你就可以通过useStore.xxx来访问user里面的方法或者参数了
// 如访问上面的token
const token = useStore.token.value
</script>