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-popconfirm
              title="确认退出吗?"
              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数据持久化的目的，再也不用担心刷新页面，数据就丢失的问题啦