Pinia 官方网站：pinia.vuejs.org
一、安装Pinia
npm install pinia --save
二、配置Pinia
（默认项目都使用 TypeScript ，默认后缀都是.ts）
在 src 目录内新建一个 store 的目录，然后在此目录下新建一个 index.ts 文件，内容如下：
import {
createPinia } from 'pinia'
const store = createPinia()
export default store
三、在项目中注册并启用Pinia
打开项目下的 “main.ts”，在里面追加pinia的内容：
import {
createApp } from 'vue'
import App from './App.vue'
// 导入Pinia状态管理器
import store from './store/index'
createApp(App).use(store).mount('#app')
四、创建一个State
在 src/store 目录下新建一个 user.ts 文件，内容如下：
import {
defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${
state.userName}(${
state.userID})`
},
},
// action 支持 async/await 的语法，可以自行添加使用
// action 里的方法相互之间调用，直接用 this 访问即可
actions: {
updateUserName(name: string) {
this.userName = name
},
},
})
五、在页面中使用这个Store
例如需要在 app.vue 这个页中使用，内容如下：
<template>
{
{
store.fullName }}
<p>
<button @click="onChangeName()">改变Store里的名字</button>
</p>
</template>
<script setup lang="ts">
import {
ref, onMounted } from 'vue'
import {
userStore } from '@/store/user'
const store = userStore()
const onChangeName = (name) => {
store.updateUserName(name ?? '李同学')
}
onMounted(() => {
onChangeName('张同学')
})
</script>
<style scoped></style>
到此一个基础的store就已经完成，如果还需要结合Local Storage持久化存储数据，接着往下看
六、Pinia的数据持久化，使用插件（pinia-plugin-persist）
pinia plugin persist官方网站：pinia-plugin-persist
1、安装 pinia-plugin-persist
npm install pinia-plugin-persist --save
2、在 Pinia 中启用 pinia-plugin-persist
打开 src/store/index.ts ，修改内容如下：
import {
createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
3、在一个state中使用localStorage存储数据
打开上面创建的 user.ts 文件，修改内容如下：
import {
defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${
state.userName}(${
state.userID})`
},
},
actions: {
updateUserName(name: string) {
this.userName = name
},
},
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
key: 'my_project', // key可以自己定义，不填的话默认就是这个store的ID
storage: localStorage, // storage可以填sessionStorage，localStorage
paths: ['userID', 'userName'] }, // paths是需要存储的字段，不填就是全部
},
],
},
})