一、安装pinia和持久化插件
npm install pinia pinia-plugin-persistedstate
二、使用
1.在stores目录下创建index.ts
// stores/index.ts
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const store = createPinia();
store.use(
// 默认即为JSON序列化
piniaPluginPersistedstate
);
export default store;
2.在main.ts中引入
import { createApp } from 'vue'
// 引入pinia状态管理库
import store from './stores';
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')
3.举个栗子
场景:在登录时,将用户信息缓存至user.ts模块中,用户信息包括userInfo对象,和token字符串两部分
import { reactive, ref } from "vue";
import { defineStore, acceptHMRUpdate } from "pinia";
// 定义userInfo对象数据
interface userType {
id?: string;
username?: string;
nickname?: string;
avatar?: null | string;
email?: null | string;
roles?: string;
createTime?: string;
updateTime?: string;
}
export const useUser = defineStore(
"userInfo",
() => {
let userInfo = reactive({
data: {} as userType,
});
let token = ref<string>("");
// 设置userInfo信息
const setUserInfo = (obj: userType = {}) => {
userInfo.data = { ...obj };
};
// 设置token
const setToken = (str: string = "") => {
token.value = str;
};
// 清空缓存
const clearStorage = () => {
setUserInfo();
setToken();
};
return { userInfo, token, setUserInfo, setToken };
},
{
persist: {
// 存储方式 默认为localStorage
storage: window.sessionStorage
},
}
);
// 热更新 编辑你的 store,并直接在你的应用中与它们互动,
// 而不需要重新加载页面,允许你保持当前的 state、并添加甚至删除 state、action 和 getter。
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot));
}
页面内使用:使用user.ts中定义的字段
<template>
<div class="header">
<div>
欢迎你 {{ userInfo.data.nickname }}
</div>
</div>
</template>
<script setup lang="ts">
// 引入 store
import { useUser } from '@/stores/user';
const userStore = useUser()
// 使用nickename 字段有两种使用方式:
// 1. 直接使用userStore.userInfo.data.nickname
// 2. 使用storeToRefs引用对象 引入后,userInfo被解构为ref对象(原先为reactive对象)
// 故要.value(在模板中不需要.value)
import { storeToRefs } from 'pinia';
const { userInfo } = storeToRefs(userStore)
// 如:userInfo.value.data.nickname
// 两者均有响应式效果
</script>