使用
官方文档
首先下载pinia
npm i pinia
引入到main.js
import {
createPinia } from "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";
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()
})
}
}
})