Pinia简单使用和Pinia持久化插件使用

1.认识Pinia(菠萝)

简单来说，pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的。

官网解释： Pinia官网：Home | Pinia 中文文档 (web3doc.top)

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

官网的解释：pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据也允许我们在各个组件中使用。

总的来说，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

2.Pinia下载安装

npm install pinia

yarn add pinia

3.使用Pinia

3.1引入Pinia

在main.js或者main.ts

//方法一
//引入Pinia
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
app.use(pinia)

//方法二
import { createPinia } from 'pinia'
app.use(createPinia())

3.2在页面中使用Pinia

 user.d.ts页面

// 用户信息
export type User = {
    /** token令牌 */
    token: string
    /** 用户ID */
    id: string
    /** 用户名称 */
    account: string
    /** 手机号 */
    mobile: string
    /** 头像 */
    avatar: string
  }

user.ts页面

//引入user.b.ts里面的User类型
import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  //cp-user是这个仓库的名字
  'cp-user',
  () => {
    // 用户信息
    const user = ref<User>()
    // 设置用户，登录后使用
    const setUser = (u: User) => {
      user.value = u
    }
    // 清空用户，退出后使用
    const delUser = () => {
      user.value = undefined
    }
    return { user, setUser, delUser }
  },
)

App.vue

<template>
  <div class='home'>
    <p>{{ store.user }}</p>
  <button @click="store.setUser({ id: '1', mobile: '1', account: '1', avatar: '1', token: '1' })">
    登录
  </button>
  <button @click="store.delUser()">退出</button>
  </div>
</template>
<script lang='ts' setup>
import { useUserStore } from './stores/user'
const store = useUserStore()
</script>

4.Pinia持久化插件

下载Pinia持久化插件

pnpm i pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

引入方法一

在main.ts文件里面引入

import { createPinia } from 'pinia'
// ppinia持久化插件
import persist from 'pinia-plugin-persistedstate'
//挂载
app.use(createPinia().use(persist))

引入方法二

在stores文件夹创建一个index.ts文件

import { createPinia } from 'pinia'
// ppinia持久化插件
import persist from 'pinia-plugin-persistedstate'
// 创建pinia实例
const pinia = createPinia()
// 使用pinia持久化插件
pinia.use(persist)
// 导出pinia实例，给main使用
export default pinia

在mian.ts中导入

// 引入stores.index中的pinia
import pinia from './stores'

app.use(pinia)

记得在Pinia库里面开启一下(看一下persist写的位置就可以了)

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  'cp-user',
  () => {
    // 用户信息
    const user = ref<User>()
    // 设置用户，登录后使用
    const setUser = (u: User) => {
      user.value = u
    }
    // 清空用户，退出后使用
    const delUser = () => {
      user.value = undefined
    }
    return { user, setUser, delUser }
  },
  // 打开持久化插件
  {
    persist: true
  }
)