返回顶部
首页 > 资讯 > 精选 >Vue怎么使用pinia管理数据
  • 473
分享到

Vue怎么使用pinia管理数据

2023-07-05 16:07:20 473人浏览 八月长安
摘要

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

这篇文章主要讲解了“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管理数据这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

    --结束END--

    本文标题: Vue怎么使用pinia管理数据

    本文链接: https://www.lsjlt.com/news/353172.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    猜你喜欢
    • Vue怎么使用pinia管理数据
      这篇文章主要讲解了“Vue怎么使用pinia管理数据”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue怎么使用pinia管理数据”吧!Vue使用pinia管理数据Vue3 + TS步骤:在...
      99+
      2023-07-05
    • Vue使用pinia管理数据pinia持久化存储问题
      目录Vue使用pinia管理数据Vue3 + TSTS 类型声明文件Axios 二次封装pinia 持久化存储用法常见疑问进阶用法(按需持久化所需数据)总结Vue使用pinia管理数...
      99+
      2023-03-24
      Vue pinia管理数据 pinia持久化存储 pinia管理数据
    • Vue新的状态管理Pinia怎么使用
      今天小编给大家分享一下Vue新的状态管理Pinia怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为什么有 Vuex ...
      99+
      2023-07-06
    • Vue全新状态管理Pinia怎么用
      这篇文章给大家分享的是有关Vue全新状态管理Pinia怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Vuex 作为一个老牌 Vue 状态管理库,大家都很熟悉了Pinia 是 Vue.js 团队成员专门为 V...
      99+
      2023-06-29
    • Vue状态管理之使用Pinia代替Vuex
      目录1、Pinia是什么2、Pinia简单上手3、使用体验1、Pinia是什么 Pinia是一个vue的状态管理方案,是vuex团队成员开发,实现了很多vuex5的提案,更加地轻量化...
      99+
      2024-04-02
    • Vue3状态管理之Pinia怎么使用
      这篇文章主要介绍“Vue3状态管理之Pinia怎么使用”,在日常操作中,相信很多人在Vue3状态管理之Pinia怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3状态管理之Pinia怎么使用”的疑...
      99+
      2023-06-30
    • Vue状态管理库Pinia和Vuex使用哪个好
      今天小编给大家分享一下Vue状态管理库Pinia和Vuex使用哪个好的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Vuex ...
      99+
      2023-07-05
    • vue中使用pinia全局状态管理的实现
      目录与vuex的区别安装引入pinia创建状态目录pinia模块组成创建pinia模块在组件中使用该状态机pinia模块实例中的api讲解状态持久化与vuex的区别 去除了 muta...
      99+
      2024-04-02
    • 浅析Vue项目中怎么用Pinia状态管理工具
      安装yarn add pinia -Smain.js引入import {createApp} from "vue" import App from "./app.vue" import store f...
      99+
      2022-11-22
      Vue Pinia
    • Vue新一代状态管理工具Pinia的具体使用
      目录前言优点安装创建并挂载创建store使用store回显与修改state使用$patch对多条数据直接修改使用actions使用getters多个store相互调用数据持久化安装使...
      99+
      2024-04-02
    • Vue之Pinia状态管理的方法是什么
      这篇文章主要介绍“Vue之Pinia状态管理的方法是什么”,在日常操作中,相信很多人在Vue之Pinia状态管理的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue之Pinia状态管理的方法是什么...
      99+
      2023-07-05
    • Vue3状态管理库Pinia如何使用
      这篇文章主要介绍“Vue3状态管理库Pinia如何使用”,在日常操作中,相信很多人在Vue3状态管理库Pinia如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3状态管理库Pinia如何使用”的疑...
      99+
      2023-07-04
    • Vue项目中如何用Pinia状态管理工具
      这篇文章主要介绍“Vue项目中如何用Pinia状态管理工具”,在日常操作中,相信很多人在Vue项目中如何用Pinia状态管理工具问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue项目中如何用Pinia状态管...
      99+
      2023-07-04
    • Vue项目新一代状态管理工具Pinia的使用教程
      目录前言Pinia与Vuex的区别使用Pinia直接修改数据的两种方式使用actions修改数据重置state中数据Pinia持久化存储Pinia模块化实现Pinia中store之间...
      99+
      2022-11-13
      vue pinia状态管理工具 vue pinia用法 vue状态管理工具
    • Pinia简单使用及数据持久化怎么实现
      这篇文章主要讲解了“Pinia简单使用及数据持久化怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Pinia简单使用及数据持久化怎么实现”吧!基本介绍Pinia 是 Vue.js 的轻...
      99+
      2023-06-30
    • Pinia怎么实现简单的用户状态管理
      这篇“Pinia怎么实现简单的用户状态管理”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Pinia怎么实现简单的用户状态管理...
      99+
      2023-07-04
    • 数据库空间使用怎么管理
      数据库空间管理是确保数据库运行顺畅和数据完整性的重要方面。以下是一些数据库空间管理的最佳实践:1. 监控数据库空间使用情况:使用数据...
      99+
      2023-06-06
      数据库空间 空间
    • 使用MongoDB做数据库怎么管理
      管理MongoDB数据库可以使用MongoDB提供的命令行工具mongo和可视化管理工具MongoDB Compass。1. 使用命...
      99+
      2023-09-01
      mongodb 数据库
    • Vue3状态管理之Pinia的入门使用教程
      目录Vue3 新的发展方向(来源于尤大知乎)一、Pinia 简介与基础1.1 Pinia 简介1.2 Pinia 基础二、Pinia 在Vue3-Vite中的使用2.1 基础使用流程...
      99+
      2024-04-02
    • 聊聊两个Vue状态管理库Pinia和Vuex,该用哪个?
      本篇文章带大家聊聊Vue状态管理,介绍一下两个Vue状态管理库:Pinia和Vuex,希望对大家有所帮助!Vuex 和 Pinia 是用于管理 Vue.js 应用程序状态的标准 Vue.js 库。让我们比较一下他们的代码、语言、功能和社区支...
      99+
      2023-05-14
      Vue Pinia VueX
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作