Vue使用pinia管理数据 pinia 持久化存储

9 篇文章 0 订阅
5 篇文章 0 订阅

Vue使用pinia管理数据

Vue3 + TS

步骤:
  1. main.ts中注册 pinia

    import { createPinia } from 'pinia'
    
    const pinia = createPinia()
    
    app.use(pinia)
    
  2. 创建文件store/modules/home.ts,用于管理home模块的数据

    import { defineStore } from 'pinia'
    
    const useHomeStore = defineStore('home',{
        state:()=>({
            name:'tony'
        })
    })
    
    export default useHomeStore
    
  3. 创建store/index.ts统一管理所有的模块

    import useHomeStore from './modules/home'
    
    const useStore = () => {
        return {
            home:useHomeStore()
        }
    }
    
    export default useStore
    
  4. 测试

    import useStore from '@/store'
    const { home } = useStore()
    console.log(home.tony)
    
实际操作:使用 Pinia 获取头部分类导航
  1. 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                        
         }
        }
    })
    
  2. 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;
+ }

+/**
+ * axios 二次封装,整合 TS 类型
+ * @param url  请求地址
+ * @param method  请求类型
+ * @param submitData  对象类型,提交数据
+ */
+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'],
  },
})
  • 1
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wendyymei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值