pinia的使用和持久化存储

持久化存储"/>

pinia的使用和持久化存储

一、pinia是什么：

        1、Pinia 是 Vue.js 的轻量级状态管理库，是vuex的升级版，常见于vue3中使用。

二、pinia基本使用：

        1、装包：npm i pinia。

        2、在main.js中use

三、pinia持久化插件：   pinia-plugin-persistedstate

        1、装包：npm i pinia-plugin-persistedstate。

        2、在main.js中和pinia配合使用

import { createPinia } from "pinia";
// pinia开启持久化存储
import piniaPluginPersist from "pinia-plugin-persist";
// 统一注册组件
const app = createApp(App);
const store = createPinia();
store.use(piniaPluginPersist);
// 先使用再挂载
app.use(store).mount("#app");

四、使用：

  路径：store/userStore.js

import { defineStore } from "pinia";
import { ref, computed } from "vue";
import router from "@/router";
//computed相当于是计算属性
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import { loginApi } from "@/apis/user";
export const useUserStore = defineStore("user",() => {let userInfo = ref({});const getUserInfo = async (data) => {let res = await loginApi(data);userInfo.value = res.data.result;// console.log(res.data.result);if (res.data.msg == "操作成功") {ElMessage({message: "登录成功",type: "success",});setTimeout(() => {router.push("/home");}, 400);}};return {userInfo,getUserInfo,};},{persist: {enabled: true,strategies: [{ storage: localStorage, paths: ["userInfo"] }],},}
);

上面是登录的时候调接口并持久化存储用户信息

持久化的代码是：   {
    persist: {

      //enabled：是是否开启持久化存储
      enabled: true,

      //strategies：是设置默认持久化存储的位置，默认在 sessionStorage 中存储，paths：为持久化存储的属性

      strategies: [{ storage: localStorage, paths: ["userInfo"] }],
    },
  }

五、在vue组件中使用：

        在js中引入

import { useUserStore } from "@/store/userStore";
let useUser = useUserStore();
console.log(useUser);

       在template中使用

<template><nav class="app-topnav"><div class="container"><ul><template v-if="useUser.userInfo?.token"><li><a href="javascript:;"><i class="iconfont icon-user"></i>{{ useUser.userInfo.nickname }}</a></li><li><el-popconfirmtitle="确认退出吗?"confirm-button-text="确认"cancel-button-text="取消"@confirm="confirmEvent"><template #reference><a href="javascript:;">退出登录</a></template></el-popconfirm></li><li><a href="javascript:;">我的订单</a></li><li><a href="javascript:;">会员中心</a></li></template><template v-else><li><a href="/login">请先登录</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">关于我们</a></li></template></ul></div></nav>
</template>

这样就达到了pinia数据持久化的目的，再也不用担心刷新页面，数据就丢失的问题啦