Vue怎么使用pinia管理数据

这篇文章主要讲解了“Vue怎么使用pinia管理数据”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue怎么使用pinia管理数据”吧！

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'],  },})

感谢各位的阅读，以上就是“Vue怎么使用pinia管理数据”的内容了，经过本文的学习后，相信大家对Vue怎么使用pinia管理数据这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！