pinia的使用+pinia持久化存储

pinia的使用

pinia中state的使用

定义

//stores/user.js
import { defineStore } from "pinia";

export const useStore = defineStore("user", {
  state: () => ({
     counter: 1,
  }),
});

使用

//About.vue
<script setup>
import { storeToRefs } from "pinia";
import { useStore } from "@/stores/main.js";

const store = useStore();
let {counter}=store
</script>
<template>
  <div>{{ counter }}</div>
</template>

pinia使用

持久化存储

安装

npm i pinia-plugin-persist --save 

在我的项目里pinia是在main.js里面引入的 让我们来修改一下

import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist";

import App from "./App.vue";
import router from "./router";

const app = createApp(App);
const store = createPinia();

store.use(piniaPluginPersist);
app.use(store);
app.use(router);
app.mount("#app");

export default store;

使用pinia进行存储需要添加:enabled: true默认是存在sessionStorage里面的

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => ({
    token: 3,
  }),
  actions: {
    setToken(v) {
      this.token = v;
    },
  },
  persist: {
    enabled: true,
  },
});

如果想要存在localStorage里面的话需要进行以下修改

persist: {
  enabled: true,
  strategies: [
    {
      key: 'userInfo',//设置存储的key
      storage: localStorage,//表示存储在localStorage
    }
  ]
}

默认所有 state都会进行存储，当然也可以指定某个字段进行存储

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['token'],//指定要长久化的字段
    }
  ]
}

第二种方式 安装 npm i pinia-plugin-persistedstate --save 在mine.js里使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const app = createApp(App)
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

app.use(pinia)
app.use(router)

app.mount('#app')

//stores/user.js
import { ref, computed, reactive } from "vue";
import { defineStore } from "pinia";

export const userStore = defineStore("user",() => {
    const state = reactive({
      userInfo: {
        username: "",
        token: "",
      },
    });
    function userFn(val: any) {
      state.userInfo.username = val;
    }

    return { state, userFn };
  },
  {
    persist: {
        enabled: true
      },
  }
);