Vue3 Pinia

发布于:2025-07-12 ⋅ 阅读:(18) ⋅ 点赞:(0)

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)
 })


      网站公告

      今日签到

      点亮在社区的每一天
      去签到