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中使用

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