Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題

更新時間：2023年03月24日 11:07:27 作者：wendyymei

這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue使用pinia管理數(shù)據(jù)

Vue3 + TS

步驟：

在main.ts中注冊 pinia

import { createPinia } from 'pinia'

const pinia = createPinia()

app.use(pinia)

創(chuàng)建文件store/modules/home.ts,用于管理home模塊的數(shù)據(jù)

import { defineStore } from 'pinia'

const useHomeStore = defineStore('home',{
    state:()=>({
        name:'tony'
    })
})

export default useHomeStore

創(chuàng)建store/index.ts統(tǒng)一管理所有的模塊

import useHomeStore from './modules/home'

const useStore = () => {
    return {
        home:useHomeStore()
    }
}

export default useStore

測試

import useStore from '@/store'
const { home } = useStore()
console.log(home.tony)

實際操作：使用 Pinia 獲取頭部分類導(dǎo)航

在store/modules/home.ts中提供 state 和 actions

const useHomeStore = defineStore('home',{
    state:() =>({
        categoryList:[]
    }),
    actions:{
     aysnc getAllCategory(){
      const {data} = await rquest.get('/home/category/head')
      this.categoryList = data.result                        
     }
    }
})

在Layout/index.vue中發(fā)送請求

<script setup lang="ts">
import useStore from '@/store'
const { home } = useStore()
home.getAllCategory()
</script>

TS 類型聲明文件

定義類型聲明

在src\types\api\home.d.ts中定義數(shù)據(jù)類型

// 分類數(shù)據(jù)單項類型
export interface Goods {
  desc: string;
  id: string;
  name: string;
  picture: string;
  price: string;
  title: string;
  alt: string;
};

export interface Children {
  id: string;
  name: string;
  picture: string;
  goods: Goods[];
};

export interface Category {
  id: string;
  name: string;
  picture: string;
  children: Children[];
  goods: Goods[];
};

// 分類數(shù)據(jù)列表類型
export type CategoryList = Category[];

類型出口統(tǒng)一

新建 src\types\index.d.ts

// 統(tǒng)一導(dǎo)出所有類型文件
export * from "./api/home";

應(yīng)用

修改store/modules/home.ts，給 axios 請求增加泛型

import { defineStore } from "pinia";
import request from "@/utils/request";
import type { CategoryList } from "@/types";

const useHomeStore = defineStore("home", {
  state: () => ({
    categoryList: [] as CategoryList,
  }),
  actions: {
    async getAllCategory() {
      const {data} = await request.get("/home/category/head");
      this.categoryList = data.result;
    },
  },
});

export default useHomeStore;

Axios 二次封裝

src\utils\request.ts

-import axios from "axios";
+import axios, { type Method } from "axios";

const instance = axios.create({
  baseURL: "xxx",
  timeout: 5000,
});

// 添加請求攔截器
instance.interceptors.request.use(
  function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應(yīng)攔截器
instance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error);
  }
);

+ // 后端返回的接口數(shù)據(jù)格式
+ interface ApiRes<T = unknown> {
+    msg: string;
+    result: T;
+ }

+/**
+ * axios 二次封裝，整合 TS 類型
+ * @param url  請求地址
+ * @param method  請求類型
+ * @param submitData  對象類型，提交數(shù)據(jù)
+ */
+export const http = <T>(method: Method, url: string, submitData?: object) => {
+  return instance.request<ApiRes<T>>({
+    url,
+    method,
+    // ?? 自動設(shè)置合適的 params/data 鍵名稱，如果 method 為 get 用 params 傳請求參數(shù)，否則用 data
+    [method.toUpperCase() === "GET" ? "params" : "data"]: submitData,
+  });
+};

export default instance;

使用store/modules/home.ts

import { defineStore } from 'pinia'
-import request from "@/utils/request";
+import { http } from "@/utils/request";

const useHomeStore = defineStore('home',{
    state:()=>({
        name:'tony'
    })，
    actions: {
    async getAllCategory() {
-    const res = await request.get<ApiRes<CategoryList>>("/home/category/head");
+    // 使用起來簡潔很多
+    const res = await http<CategoryList>("GET", "/home/category/head");
     this.categoryList = res.data.result;
    },
  },
})

export default useHomeStore

pinia 持久化存儲

目標： 通過 Pinia 插件快速實現(xiàn)持久化存儲。

插件文檔：點擊查看

用法

安裝

yarn add pinia-plugin-persistedstate
# 或
npm i pinia-plugin-persistedstate

使用插件

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

模塊開啟持久化

const useHomeStore = defineStore("home",()=>{
...
},
// defineStore 第三個參數(shù)
  {
    // 添加配置開啟 state/ref 持久化存儲
    // 插件默認存儲全部 state/ref
    persist: true,
  }
);

常見疑問

Vue2 能不能用 Pinia 和持久化存儲插件。

可以使用，需配合 @vue/composition-api 先讓 Vue2 老項目支持組合式API。
Pinia 能在組合式API 中使用。

模塊做了持久化后，以后數(shù)據(jù)會不會變，怎么辦？

先讀取本地的數(shù)據(jù)，如果新的請求獲取到新數(shù)據(jù)，會自動把新數(shù)據(jù)覆蓋掉舊的數(shù)據(jù)。
無需額外處理，插件會自己更新到最新數(shù)據(jù)。

進階用法（按需持久化所需數(shù)據(jù)）

需求：不想所有數(shù)據(jù)都持久化處理，能不能按需持久化所需數(shù)據(jù)，怎么辦？

可以用配置式寫法，按需緩存某些模塊的數(shù)據(jù)。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有數(shù)據(jù)持久化
  // persist: true,
  // 持久化存儲插件其他配置
  persist: {
    // 按需存儲 state/ref
    // 修改存儲中使用的鍵名稱，默認為當前 Store的 id
    key: 'storekey',
    // 修改為 sessionStorage，默認為 localStorage
    storage: window.sessionStorage,
    // ??按需持久化，默認不寫會存儲全部
    paths: ['nested.data'],
  },
})