Vue使用pinia管理数据
Vue3 + TS
步骤:
在main.ts
中注册 pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
创建文件store/modules/home.ts
,用于管理home模块的数据
import { defineStore } from 'pinia'
const useHomeStore = defineStore('home',{
state:()=>({
name:'tony'
})
})
export default useHomeStore
创建store/index.ts
统一管理所有的模块
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 获取头部分类导航
在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
中发送请求
<script setup lang="ts">
import useStore from '@/store'
const { home } = useStore()
home.getAllCategory()
</script>
TS 类型声明文件
定义类型声明
在src\types\api\home.d.ts
中定义数据类型
// 分类数据单项类型
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[];
};
// 分类数据列表类型
export type CategoryList = Category[];
类型出口统一
新建 src\types\index.d.ts
// 统一导出所有类型文件
export * from "./api/home";
应用
修改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) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
+ // 后端返回的接口数据格式
+ interface ApiRes<T = unknown> {
+ msg: string;
+ result: T;
+ }
+
+export const http = <T>(method: Method, url: string, submitData?: object) => {
+ return instance.request<ApiRes<T>>({
+ url,
+ method,
+ // ? 自动设置合适的 params/data 键名称,如果 method 为 get 用 params 传请求参数,否则用 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
插件快速实现持久化存储。
插件文档:点击查看
用法
安装
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 第三个参数
{
// 添加配置开启 state/ref 持久化存储
// 插件默认存储全部 state/ref
persist: true,
}
);
常见疑问
Vue2 能不能用 Pinia 和 持久化存储插件。
- 可以使用,需配合 @vue/composition-api 先让 Vue2 老项目支持 组合式API。
- Pinia 能在 组合式API 中使用。
模块做了持久化后,以后数据会不会变,怎么办?
- 先读取本地的数据,如果新的请求获取到新数据,会自动把新数据覆盖掉旧的数据。
- 无需额外处理,插件会自己更新到最新数据。
进阶用法(按需持久化所需数据)
需求:不想所有数据都持久化处理,能不能按需持久化所需数据,怎么办?
可以用配置式写法,按需缓存某些模块的数据。
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
nested: {
data: 'nested pinia',
},
}
},
// 所有数据持久化
// persist: true,
// 持久化存储插件其他配置
persist: {
// 按需存储 state/ref
// 修改存储中使用的键名称,默认为当前 Store的 id
key: 'storekey',
// 修改为 sessionStorage,默认为 localStorage
storage: window.sessionStorage,
// ?按需持久化,默认不写会存储全部
paths: ['nested.data'],
},
})
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。