背景：
前端项目在开发过程中，需要对数据进行管理，包括组件内的数据、组件间的数据等情况。当多个组件或页面使用公共数据时，状态管理就变得尤为重要。大家都知道在Vue2时，使用Vuex进行状态管理。但如果您的项目是基于Vue3搭建，Pinia是更好的选择。
Pinia在Composition API的设计背景下，以Vuex下一代的构想设计了新的Vue存储状态管理库；Pinia 是一个基于 Vue 3 的状态管理库，它提供了一个可组合的、类型安全的 API 来管理 Vue 应用程序的状态。
pinia使用：
1.下载插件
npm install pinia
2.在main.ts文件中导入createPinia函数并使用
import { createPinia } from 'pinia'import { createApp } from 'vue'import App from './App.vue'
const pinia = createPinia()const app = createApp(App) app.use(pinia)app.mount('#app')
3.创建store文件，例如：register.ts
import { ref } from 'vue'export const useRegisterStore = defineStore('register', () => { const registerId = ref<string>('') const setRegisterId=(val: string)=> { registerId.value = val } return { registerId, setRegisterId, } })
import { ref } from 'vue'import { useRegisterStore } from '@/store/register' // register.ts文件位置const register = useRegisterStore()const newRegisterId = ref('')register.setRegisterId('123' || '') // 存数据newRegisterId = register.registerId // 取数据pinia持久化：
1.下载pinia-plugin-persist
npm install pinia-plugin-persist
2.在main.ts文件中导入pinia-plugin-persist
import { createPinia } from 'pinia'import { createApp } from 'vue'import piniaPluginPersist from 'pinia-plugin-persist' // 引入pinia-plugin-persistimport App from './App.vue'
const pinia = createPinia()const app = createApp(App)
pinia.use(piniaPluginPersist) // 进行持久化存储配置app.use(pinia)app.mount('#app')
3.在store文件中进行配置
import { ref } from 'vue'export const useRegisterStore = defineStore('register', () => { const registerId = ref<string>('') const setRegisterId=(val: string)=> { registerId.value = val } return { registerId, setRegisterId, } }, { persist: { // 开启持久化 enabled: true, // 选择存储方式和内容， strategies: [ { storage: localStorage, paths: ['registerId'] }, // 对registerId进行localStorage存储 ], } })
4.pinia-plugin-persist参数 strategies 字段说明：
| 属性 | 描述 |
|---|---|
| key | 自定义存储的 key，默认是 store.$id |
| storage | 可以指定任何 extends Storage 的实例，默认是 sessionStorage |
| paths | state 中的字段名，按组打包储存 |
总结
到此，就完成对数据的状态管理，并进行持久化了。大家可以根据项目的情况，对指定的数据进行持久化。
