Vue3 Pinia

1、安装Pinia

npm install pinia
npm install pinia-plugin-persistedstate

2、在main.js中配

import { createApp } from 'vue'
import App from './App.vue'
//引入pinia状态机
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; //pinia持久化const app = createApp(App);
const pinia = createPinia();app.use(ElementPlus, { locale: zhCn })
//全局挂载状态机
app.use(pinia);
pinia.use(piniaPluginPersistedstate);
app.mount('#app')

3、在src下创建store文件夹创建demo.js（状态）文件

import { defineStore } from "pinia";//userStore：定义一个仓库对象,保存用户信息
//state：仓库数据
//getters：仓库计算属性
//actions：仓库方法//pinia使用
// import { userStore } from "@/store/modules/userStore.js";
// const user_store = userStore()
// console.log(user_store.user, "-----userStore.user--")
//监听pinia值的变化
// user_store.$subscribe((mutate, state) => {
//   console.log("里面的数据发生了变化", mutate, state)
// })export const userStore = defineStore("users", {state: () => {//用户信息return {user: null,};},getters: {isLoggedIn: (state) => !!state.user, //是否登录},actions: {//登录updateLogin(user) {this.user = user;},//退出登录(清除本地存储的操作是异步的，所以这里使用async/await，确保清除完本地存储后再跳转到登录页面)async logout() {this.user = null;//并清空本地储存localStorage和sessionStorageawait localStorage.clear(); // 清除本地存储await sessionStorage.clear(); // 清除会话存储},//修改用户信息user中信息的通用方法，其中updates是一个对象，填写需要修改的信息updateUser(updates) {if (this.user) {this.user = { ...this.user, ...updates }}},},//增加一个插件方法（pinia-plugin-persist），解决刷新页面数据丢失的问题，持久化数据(该插件默认会将所有数据存储到sessionStorage中，也可以自定义存储策略)persist: {enabled: true,               // 启用持久化storage: sessionStorage,       // 存储方式: localStorage 或 sessionStorage// paths: ['count'],            // 只持久化 count 状态key: 'custom-counter-store', // 自定义存储的 key}
});

4、pinia使用

//pinia使用import { userStore } from "@/store/demo.js";const user_store = userStore()//user_store.变量名     进行使用或修改值// 第二种修改方法，批量变更// user_store.$patch({//   sum:888,//   school:"scu",//   address:'成都'// })console.log(user_store.user, "-----userStore.user--")//监听pinia值的变化user_store.$subscribe((mutate, state) => {console.log("里面的数据发生了变化", mutate, state)})