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和sessionStorage
await 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)
})