Pinia的介绍、使用及持久化

Pinia介绍

什么是Pinia？

Pinia 是 Vue 的最新 状态管理工具，状态就是数据。

通俗地讲：Pinia 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)。

比如一份数据有多个组件需要使用，在学Pinia之前我们需要用父子组件通信这样麻烦的方法，但是学习了Pinia之后，我们只需要把这些需要共享的数据扔进一个数据仓库，在需要使用这些共享数据的组件中导入这个数据仓库就可以了

使用场景

① 某个状态在很多个组件来使用 (比如个人信息)

② 多个组件共同维护一份数据

优势

① 共同维护一份数据，数据集中化管理

② 响应式变化

③ 操作简洁 (提供了一些辅助函数)

使用

在创建项目时，只要你在“是否引入Pinia用于状态管理”这一项中选择了“是”

那么创建的项目中就会有一个stores文件夹，并且里面有一个counter.ts文件，这个文件就是你的数据仓库

 

我们不妨先来看看counter.ts中的内容，counter.ts中非常友好地写了简单易懂的demo，红字是我对代码的标识，相信聪明的你们一看就懂

组件中使用仓库中的数据，看看下面的代码示例吧

// 导入 useCounterStore 方法
import { useCounterStore } from '@/stores/counter'
// 执行 useCounterStore 方法得到 counterStore对象，对象中存放了数据仓库中的数据
const counterStore = useCounterStore()
//使用仓库中的数据和方法
counterStore.increment()
const number = counterStore.count

持久化

有时我们希望仓库中的数据持久化存储在我们本地，这是就要引入持久化插件了

1、进入持久化插件网站：

快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

2、安装

pnpm i pinia-plugin-persistedstate

3、main.js 使用

在main.js（或main.ts，你懂的）中加入这三行代码

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
app.use(pinia.use(piniaPluginPersistedstate))

4、在数据仓库中，将 persist 选项设置为 true

Vue2选项式语法

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

Vue3组合式语法

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

现在你的数据就已经是持久化的啦，写写代码测试一下效果吧！