【Vue】Vue3.0(十七)Vue 3.0中Pinia的深度使用指南(基于setup语法糖)

上篇文章: 【Vue】Vue3.0(十一)Vue 3.0 中 computed 计算属性概念、使用及示例

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年11月10日15点23分

文章目录

    • 一、前言
    • 二、Pinia基础与setup语法糖的融合
      • (一)理解Pinia的核心优势
      • (二)setup语法糖简介
    • 三、Pinia的安装与基本配置
      • (一)安装Pinia
      • (二)在项目中配置Pinia
    • 四、创建和使用Store
      • (一)创建一个简单的Store示例
      • (二)在组件中使用Store(基于setup语法糖)
    • 五、深入理解State在setup中的使用
      • (一)响应式State的原理
      • (二)直接修改State
    • 六、Getters的灵活运用
      • (一)计算属性风格的Getters
      • (二)传递参数的Getters
    • 七、强大的Actions功能
      • (一)同步和异步Actions
      • (二)在组件中调用Actions
    • 八、Store之间的交互
      • (一)在不同Store中共享数据和方法
    • 九、结论

一、前言

在Vue 3.0的开发中,高效的状态管理是构建大型应用的关键。Pinia作为专为Vue 3设计的状态管理库,结合setup语法糖,能让我们更优雅地处理应用状态。本文将详细阐述在使用setup语法糖的情况下,Pinia在Vue 3.0中的使用细节。

二、Pinia基础与setup语法糖的融合

(一)理解Pinia的核心优势

Pinia提供了一种简洁且直观的方式来管理应用状态。与传统的状态管理方式相比,它具有更好的类型推断、更灵活的模块结构,在与Vue 3.0的setup语法糖配合时,能减少大量样板代码。

(二)setup语法糖简介

setup函数是Vue 3.0中一个新的组件选项,它在组件创建之前执行。在这个函数中,可以使用Composition API来组织逻辑。使用setup语法糖可以让我们更方便地在组件中引入和使用Pinia的Store。

三、Pinia的安装与基本配置

(一)安装Pinia

通过npm安装Pinia到Vue 3.0项目中:

npm install pinia

(二)在项目中配置Pinia

在main.js(或main.ts)中,创建并挂载Pinia实例:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app');

四、创建和使用Store

(一)创建一个简单的Store示例

创建一个名为counterStore.js(或counterStore.ts)的文件:

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),getters: {doubleCount: (state) => state.count * 2},actions: {increment() {this.count++;}}
});

(二)在组件中使用Store(基于setup语法糖)

在Vue组件中:

<template><div><p>Count: {{ counterStore.count }}</p><p>Double Count: {{ counterStore.doubleCount }}</p><button @click="counterStore.increment">Increment</button></div>
</template><script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
</script>

另外一个例子:
在这里插入图片描述
count.ts


import { defineStore } from "pinia";export const useCountStore = defineStore('count',//pinia中真正存储数据的地方{actions:{increment(value: number){this.sum+=value}},state(){return{sum:6}}}
);

在count中我要实现对store中sum值的增减,那写法有三种:

  • //第一种 修改某个值的时候,这种的修改最为方便
    countStore.sum+=n.vaue

//第二种 :需改多个值的时候这种使用的较多
countStore.$patch({
})

  • //第三种:当对数据的处理方法也被别的组件使用,需要对这个数据处理的动作形成一个公共的方法的话,需要在store中形成一个action,然后再在vue中的调用
    countStore.increment(n.value) //这个是一个store中的action

Count.vue

<template><div class="count"><h2>当前求和为:{{countStore.sum}}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add"></button><button @click="minus"></button></div>
</template><script lang="ts" setup name="Count">
import { reactive, ref } from 'vue'; 
//引入pinia中的数据
import {useCountStore} from '@/store/count'
import { log } from 'console';
//数据
//使用store得到一个count相关的store
const countStore =useCountStore();let n =ref(1); //用户选择的数字//方法
function add(){// sum.value+=n.value//第一种  修改某个值的时候,这种的修改最为方便countStore.sum+=n.vaue//第二种 :需改多个值的时候这种使用的较多countStore.$patch({})//第三种:当对数据的处理方法也被别的组件使用,需要对这个数据处理的动作形成一个公共的方法的话,需要在store中形成一个action,然后再在vue中的调用countStore.increment(n.value)
}
function minus(){// sum.value-=n.value
}
</script><style scoped>
.count {background-color: skyblue;padding: 10;border-radius: 10px;box-shadow: 0 0 10px;
}select,button {margin: 0 5px;height: 25px;
}
</style>

在这里插入图片描述

五、深入理解State在setup中的使用

(一)响应式State的原理

在Pinia的Store中,state是响应式的。当使用setup语法糖时,这种响应式机制无缝衔接。这是因为Pinia内部使用了Vue 3.0的响应式系统,对state进行了包装,使得在组件中使用时,能够自动更新视图。

(二)直接修改State

虽然可以直接通过this.count++这样的方式在actions中修改state,但不建议在组件中直接修改store的state。应该通过定义好的actions来保证数据的一致性和可维护性。

六、Getters的灵活运用

(一)计算属性风格的Getters

Getters在Pinia中类似于计算属性。在setup中使用时,它们会根据依赖的state自动计算和缓存结果。例如,doubleCount这个getter会在count变化时重新计算。

(二)传递参数的Getters

除了简单的计算属性风格的getters,Pinia还支持带有参数的getters。这可以让我们根据不同的条件计算出不同的值。例如:

getters: {multiplyCount: (state) => (factor) => state.count * factor
}

在组件中使用:

<template><div><button @click="console.log(counterStore.multiplyCount(3))">Multiply by 3</button></div>
</template>

七、强大的Actions功能

(一)同步和异步Actions

Actions可以是同步或异步的。同步actions如increment可以直接修改state。异步actions则可以用于处理网络请求等异步操作。例如:

actions: {async fetchData() {const response = await fetch('https://example.com/data');const data = await response.json();// 处理数据并可能修改state}
}

(二)在组件中调用Actions

在setup中,可以直接调用store的actions。对于异步actions,可以使用async/await来处理异步流程。例如:

<template><div><button @click="fetchData">Fetch Data</button></div>
</template><script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
const fetchData = async () => {await counterStore.fetchData();
};
</script>

八、Store之间的交互

(一)在不同Store中共享数据和方法

有时候,不同的Store之间需要共享数据或调用彼此的方法。可以通过在一个Store中引入另一个Store来实现。例如,如果有一个userStorecounterStoreuserStore可以在某个action中调用counterStore的方法:

import { defineStore } from 'pinia';
import { useCounterStore } from './counterStore';export const useUserStore = defineStore('user', {state: () => ({username: 'default'}),actions: {resetCounter() {const counterStore = useCounterStore();counterStore.count = 0;}}
});

九、结论

在Vue 3.0中,结合setup语法糖使用Pinia可以让状态管理变得更加简洁、高效和灵活。通过深入理解和运用Pinia的各个特性,我们能够更好地构建复杂的应用程序,提高代码的可维护性和可读性,从而为用户带来更优质的体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469180.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器&#xff0c;验证纯数字&#xff0c;禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度 效果图 <el-form ref"dataFormRef" :model"dataForm" :rules"dataRules" label-w…

SwiftUI(十)- 列表(分组,折叠)

引言 SwiftUI中的List组件不仅可以用户创建简单的列表&#xff0c;和UITableView一样&#xff0c;它也支持分组和折叠功能&#xff0c;让数据展示更具层次感。通过分组功能&#xff0c;我们可以将数据按照特定的逻辑进行组织&#xff0c;而折叠则为用户提供了更为紧凑的界面体…

链表(Linkedlist)

序言 我们都了解链表是一种数据的存储结构&#xff0c;在Java使用中逻辑与c&#xff0c;c语言数据结构别无二致&#xff0c;但主要由于Java中不存在指针的说法&#xff0c;从而导致在实现过程中的代码不同&#xff0c;所以在学习的过程中我们无需过于担心&#xff0c;逻辑都是…

JS之正则表达式

一、什么是正则表达式 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </…

MySQL数据库:本地部署数据库以及安装彩虹猫【Navicat】

文章目录 一.安装前准备工作1.下载并解压文件2.修复电脑缺失的文件 二.本地部署MySQL1.先解压mysql-8.0.25-winx64.zip&#xff0c;并把文件放到安装需要的位置&#xff0c;再把my.ini文件放到mysql-8.0.25-winx64的根目录2.修改注册表的根目录信息为自己的安装装路径3.进命令符…

11个简单易用的电商购物车设计案例

文章目录 前言正文1.扁平化设计购物车2.无表格布局购物车3.美食购物车4.响应式购物车5.jQuery购物车6.动态价格更新购物车7.标签式滑动购物车8.动态商店与购物车一体化设计9.简约清爽的购物车设计10.基于Vue.js的购物车11.域名购物车 总结 前言 现在的电子商务网站&#xff0c…

Stable Diffusion Web UI - ControlNet 姿势控制 openpose

openpose 是 ControlNet 中常用的控制模式之一。 通过 openpose 可以锁定人物姿势&#xff0c;把姿势信息传递给 Stable Diffusion 扩散模型&#xff0c;让其在扩散生成图片的时候遵照特定的任务姿势。 通过 openpose 能够得到类似如下效果&#xff1a; 同样的姿势&#xff0…

Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明;Skip-gram模型实现词嵌入;热编码(One-Hot Encoding)和词向量;

目录 Word2Vec Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明 一、Word2Vec的词向量维度 二、训练数据集单条数据的大小 综上所述 热编码(One-Hot Encoding)和词向量 一、表示方式 二、维度与计算效率 三、语义捕捉能力 四、举例说明 Skip-gram模…

大模型预训练+微调大模型;大模型提示/指令模式”(Prompt/Instruct Mode)

目录 大模型发布版本 大模型参数量 预训练+微调大模型 预训练大模型的优势 微调的概念与过程 微调的优势 应用场景与案例 提示/指令模式”(Prompt/Instruct Mode) Prompt模式与Instruct模式的区别与联系 Prompt/Instruct模式的应用优势 应用案例 大模型发布版本 大…

WPF在MVVM模式下怎么实现导航功能

在mvvm的模式下wpf通过frame实现页面跳转_哔哩哔哩_bilibili 视频讲解同步可观看 如下图&#xff0c;我们要实现点击左侧的菜单&#xff0c;在右侧展示不同的页面 实现代码如下&#xff1a; 一、如何从主窗体跳转到页面。 1、在mainwindow.xaml的菜单栏代码里加入如下代码 …

ubuntu 22.04 server 安装 anaconda3

ubuntu 22.04 server 安装 anaconda3 https://www.anaconda.com/download/success Anaconda Installers wget https://repo.anaconda.com/archive/Anaconda3-2024.10-1-Linux-x86_64.sh 其他的是 默认 Executing transaction: done installation finished. Do you wish to…

亚信安全新一代WAF:抵御勒索攻击的坚固防线

近年来&#xff0c;勒索攻击已成为黑客的主要攻击手段。新型勒索攻击事件层出不穷&#xff0c;勒索攻击形势愈发严峻&#xff0c;已经对全球制造、金融、能源、医疗、政府组织等关键领域造成严重危害。如今&#xff0c;勒索攻击手段日趋成熟、攻击目标愈发明确&#xff0c;模式…

函数式编程Stream流(通俗易懂!!!)

目录 1.Lambda表达式 1.1 基本用法 1.2 省略规则 2.Stream流 2.1 常规操作 2.1.1 创建流 2.1.2 中间操作 filter map distinct sorted limit ​编辑skip flatMap 2.1.3 终结操作 foreach count max&min collect anyMatch allMatch noneMatch …

SDL线程

文章目录 SDL线程相关 SDL线程相关 SDL线程创建&#xff1a;SDL_CreateThreadSDL线程等待: SDL_WaitThreadSDL互斥锁 :SDL_CreateMutex/SDL_DestoryMutexSDL锁定互斥: SDL_LockMutex/SDL_UnlockMutexSDL条件变量:SDL_CreateCond/SDL_DestoryCondSDL条件变量 等待通知: SDL_Con…

【初阶数据结构与算法】线性表之链表的分类以及双链表的定义与实现

文章目录 一、链表的分类二、双链表的实现1.双链表结构的定义2.双链表的初始化和销毁初始化函数1初始化函数2销毁函数 3.双链表的打印以及节点的申请打印函数节点的申请 4.双链表的头插和尾插头插函数尾插函数 5.双链表的查找和判空查找函数判空函数 6.双链表的头删和尾删头删函…

深 度 学 习

神经网络基础 一、逻辑回归( Logic Regression ) 1 问题的模型 模型&#xff1a; 其中xx为输入量&#xff0c;y^​预测量&#xff0c;σ()激活函数。   逻辑回归主要用于二分类问题的拟合&#xff1a;0≤y^P(y1∣x)≤1&#xff0c;σ(z)如图&#xff1a; ​ 问题&#xff…

【Leecode】Leecode刷题之路第46天之全排列

题目出处 46-全排列-题目出处 题目描述 个人解法 思路&#xff1a; todo代码示例&#xff1a;&#xff08;Java&#xff09; todo复杂度分析 todo官方解法 46-全排列-官方解法 预备知识 回溯法&#xff1a;一种通过探索所有可能的候选解来找出所有的解的算法。如果候选解…

解线性方程组(二)

实验类型&#xff1a;●验证性实验 ○综合性实验 ○设计性实验 实验目的&#xff1a;进一步熟练掌握用Jacobi迭代法和Gauss-Seidel法解线性方程组的算法&#xff0c;提高编程能力和解算线性方程组问题的实践技能。 实验内容&#xff1a; 1)取初值性x(0)(0,0,0,0)T, 精度要求ε…

ReactPress系列—NestJS 服务端开发流程简介

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 NestJS 服务端开发流程简介 NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。它使用 TypeScript&#xff08;但也支持纯 Java…

ImportError: cannot import name ‘packaging‘ from ‘pkg_resources‘ 的参考解决方法

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04 ROS-Noetic 一、问题描述 自己在通过 pip install 安装module时 &#xff08;使用的是 pip install mmcv&#xff09;遇到如下问题&#xff1a; ImportError: cannot …