vue3-pinpa使用以及数据持久化

使用

官方文档

首先下载pinia

	npm i pinia

引入到main.js

	import {
    
     createPinia } from "pinia"; // pinia
	const pinia = createPinia()
	app.use(pinia)

创建stores

import {
    
     defineStore } from "pinia";
export const useUserStore = defineStore("user", {
    
    
  state: () => {
    
    
    return {
    
    
      token: sessionStorage.getItem("token"), // 登录信息
      userInfo: null, // 用户信息
      roles: [], // 路由权限
    };
  },
  actions: {
    
    
    login(userInfo) {
    
    
      return new Promise((resolve, reject) => {
    
    
        sessionStorage.setItem("token", userInfo.token)
        this.token = userInfo.token
        this.roles = JSON.parse(userInfo.roles)
        resolve(this.roles)
      })
    },
    changeToken(token) {
    
    
      return new Promise((resolve, reject) => {
    
    
        sessionStorage.setItem("token", token)
        this.token = token
        resolve()
      })
    }
  }
})

调用store，及修改store的数据

<template>
<div>
   {
    
    {
    
    UserStore.userInfo}}//在页面上可以呈现
</div>
<button @click="click">点击改名</button>
</template>

<script setup>
	import {
    
     useUserStore } from "@/store/users";
	const UserStore = useUserStore();
	UserStore.login({
    
    
		xxx:xxx,
		xxx:xxx
	})
</script>

pinia-plugin-persistedstate数据持久化

首先下载pinia-plugin-persistedstate

pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate

引入到main.js

import {
    
     createPinia } from "pinia"; // pinia
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

存储stores

import {
    
     defineStore } from "pinia";
export const useUserStore = defineStore("user", {
    
    
  persist: {
    
    
    key: 'user',  // 本地存储的名称
    storage: sessionStorage  // 本地存储的位置
  },
  state: () => {
    
    
    return {
    
    
      token: sessionStorage.getItem("token"), // 登录信息
      userInfo: null, // 用户信息
      roles: [], // 路由权限
    };
  },
  actions: {
    
    
    login(userInfo) {
    
    
      return new Promise((resolve, reject) => {
    
    
        sessionStorage.setItem("token", userInfo.token)
        this.token = userInfo.token
        this.roles = JSON.parse(userInfo.roles)
        resolve(this.roles)
      })
    },
    changeToken(token) {
    
    
      return new Promise((resolve, reject) => {
    
    
        sessionStorage.setItem("token", token)
        this.token = token
        resolve()
      })
    }
  }
})