Pinia本质上依然是一个全局状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux、Mobx一样）。
1.首先，本地要下载并配置好node
2.创建文件假，并用vscode打开
3.创建vue3项目
npm init vue@latest
项目名称：vue3demo1
进入到项目目录中：
命令行：
cd vue3demo1下载配置环境：
命令行：
npm i
安装pinia-plugin-persistedstate
命令行：
npm i pinia-plugin-persistedstate运行命令行：
npm run devmain.js文件修改：
修改前：
import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')
修改后：
import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia().use(piniaPluginPersistedstate))
app.use(router)app.mount('#app')
4.自定义store
src/stores/userstore.js:
没有持久化之前写法：
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useStore = defineStore('userStore', () => {const token = ref(null)// 赋值token-(普通函数)function setToken(val){token.value = val;}// 获取token-(箭头函数)const getToken = () =>{return token.value;}return { token, setToken, getToken }})持久化写法：
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useStore = defineStore('userStore', () => {const token = ref(null)const user = ref({name:null,age:null})// 赋值token-(普通函数)function setToken(val){token.value = val;}// 获取token-(箭头函数)const getToken = () =>{return token.value;}// 设置用户信息const setUserInfo = (obj) => {user.value.name = obj.name;user.value.age = obj.age;}// 获取用户信息const getUserInfo = () =>{return user;}return { token, setToken, getToken,user,setUserInfo,getUserInfo }},{persist:true// 持久化全部// 参数持久化/*persist:{key: 'testStore', //存储名称storage: sessionStorage, // 存储方式 - sessionStorage、localStorage//指定哪些数据需要被持久化。//pick: ['token','user.name'],//[] 表示不持久化任何状态//pick:[],//undefined 或 null 表示持久化全部数据//pick:null}*/})
5、使用方法
AboutView.vue:
<template><div class="about"><h1>token值：{{ store.token }}</h1><button @click="setMethod">设置token</button><button @click="getMethod">获取token</button><button @click="setUser">设置用户信息</button><button @click="getUser">获取用户信息</button><div>---------------</div><h1>用户姓名：{{ store.user.name }}</h1><h1>用户年龄：{{ store.user.age }}</h1></div>
</template>
<script setup>
import {useStore} from '@/stores/usersotre'const store = useStore();// 设置方法-普通方法
function setMethod(){store.setToken("1111")
}// 获取方法-箭头函数
const getMethod = () =>{console.log("store.getToken()", store.getToken())
}// 设置用户信息
const setUser = () =>{store.setUserInfo({name:'zgy',age:38})
}// 获取用户信息
const getUser = () =>{console.log("store.getUserInfo()",store.getUserInfo())
}</script><style>
@media (min-width: 1024px) {.about {min-height: 100vh;align-items: center;}
}
</style>
