您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue怎么使用pinia管理數(shù)據(jù)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue怎么使用pinia管理數(shù)據(jù)”吧!
步驟:
在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)
實(shí)際操作:使用 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>
定義類型聲明
在src\types\api\home.d.ts
中定義數(shù)據(jù)類型
// 分類數(shù)據(jù)單項(xiàng)類型 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;
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) { // 對請求錯(cuò)誤做些什么 return Promise.reject(error); } ); // 添加響應(yīng)攔截器 instance.interceptors.response.use( function (response) { return response; }, function (error) { // 對響應(yīng)錯(cuò)誤做點(diǎn)什么 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
目標(biāo): 通過 Pinia
插件快速實(shí)現(xiàn)持久化存儲。
插件文檔:點(diǎ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 第三個(gè)參數(shù) { // 添加配置開啟 state/ref 持久化存儲 // 插件默認(rèn)存儲全部 state/ref persist: true, } );
Vue2 能不能用 Pinia 和 持久化存儲插件。
可以使用,需配合 @vue/composition-api 先讓 Vue2 老項(xiàng)目支持 組合式API。
Pinia 能在 組合式API 中使用。
模塊做了持久化后,以后數(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 // 修改存儲中使用的鍵名稱,默認(rèn)為當(dāng)前 Store的 id key: 'storekey', // 修改為 sessionStorage,默認(rèn)為 localStorage storage: window.sessionStorage, // ????按需持久化,默認(rèn)不寫會存儲全部 paths: ['nested.data'], }, })
感謝各位的閱讀,以上就是“Vue怎么使用pinia管理數(shù)據(jù)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Vue怎么使用pinia管理數(shù)據(jù)這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。