这篇文章主要讲解了“Vue怎么使用pinia管理数据”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue怎么使用pinia管理数据”吧!Vue使用pinia管理数据vue3 + TS步骤:在
这篇文章主要讲解了“Vue怎么使用pinia管理数据”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue怎么使用pinia管理数据”吧!
步骤:
在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>
定义类型声明
在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;
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
插件快速实现持久化存储。
插件文档:点击查看
安装
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管理数据这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!
--结束END--
本文标题: Vue怎么使用pinia管理数据
本文链接: https://www.lsjlt.com/news/353172.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0