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

news2024/11/13 7:55:38

上篇文章: 【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.coloradmin.cn/o/2238084.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习基础练习:从pytorch API出发复现LSTM与LSTMP

2024/11/5-2024/11/7&#xff1a; 前置知识&#xff1a; [译] 理解 LSTM(Long Short-Term Memory, LSTM) 网络 - wangduo - 博客园 【官方双语】LSTM&#xff08;长短期记忆神经网络&#xff09;StatQuest_哔哩哔哩_bilibili 大部分思路来自于&#xff1a; PyTorch LSTM和LSTMP…

【芯智雲城】Sigmastar星宸科技图传编/解码方案

一、图传技术简介 图传是指将图像或媒体内容从一个设备传输到另外一个设备的技术&#xff0c;传输的媒介可以是无线电波、光纤、以太网等。图传系统主要由图像采集设备、传输设备和接收设备组成&#xff0c;图像采集设备负责采集实时图像&#xff0c;传输设备将采集到的图像转…

JavaFX史上最全教程 - Shape - JavaFX矩形椭圆

avaFX Shape类定义了常见的形状&#xff0c;如线&#xff0c;矩形&#xff0c;圆&#xff0c;Arc&#xff0c;CubicCurve&#xff0c;Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度&#xff0c;高度和左上角的&#xff08;x&#xff0c;y&#xff09;位置。 要在JavaFX中…

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…

使用QLoRA和自定义数据集微调大模型

大家好&#xff0c;大语言模型&#xff08;LLMs&#xff09;对自然语言处理&#xff08;NLP&#xff09;的影响是非常深远的&#xff0c;不仅提高了任务效率&#xff0c;还催生出新能力&#xff0c;推动了模型架构和训练方法的创新。尽管如此强大&#xff0c;但LLMs也有局限&am…

Mac M1 Docker创建Rocketmq集群并接入Springboot项目

文章目录 前言Docker创建rocketmq集群创建rocketmq目录创建docker-compose.yml新增broker.conf文件启动容器 Springboot 接入 rocketmq配置maven依赖修改appplication.yml新增消息生产者新增消费者测试发送消息 总结 前言 最近公司给配置了一台mac&#xff0c;正好有时间给装一…

golang分布式缓存项目 Day2

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习。 支持并发读写 接下来我们使用 sync.Mutex 封装 LRU 的几个方法&#xff0c;使之支持并发的读写。在这之…

abap 可配置通用报表字段级日志监控

文章目录 1.功能需求描述1.1 功能1.2 效果展示2.数据库表解释2.1 表介绍3.数据库表及字段3.1.应用日志数据库抬头表:ZLOG_TAB_H3.2.应用日志数据库明细表:ZLOG_TAB_P3.3.应用日志维护字段配置表:ZLOG_TAB_F4.日志封装类5.代码6.调用方式代码7.调用案例程序demo1.功能需求描述 …

材质(三)——材质参数集和材质函数

a.之前是针对材质在材质蓝图里面 类似 于静态更改的方法&#xff0c; b.材质参数集 &#xff0c;对外开放参数&#xff0c;可以手动更改&#xff0c;已然是一种封闭的静态更改方法 c.那么材质函数&#xff0c;将参数集对外开放&#xff0c;可以在关卡蓝图 通过程序 算法 去动…

随机采样之接受拒绝采样

之前提到的逆变换采样&#xff08;Inverse Transform Sampling&#xff09;是一种生成随机样本的方法&#xff0c;它利用累积分布函数&#xff08;CDF&#xff09;的逆函数来生成具有特定分布的随机变量。以下是逆变换采样的缺点&#xff1a; 计算复杂性&#xff1a;对于某些分…

软件设计师:排序算法总结

一、直接插入 排序方式&#xff1a;从第一个数开始&#xff0c;拿两个数比较&#xff0c;把后面一位跟前面的数比较&#xff0c;把较小的数放在前面一位 二、希尔 排序方式&#xff1a;按“增量序列&#xff08;步长&#xff09;”分组比较&#xff0c;组内元素比较交换 假设…

信息安全工程师(78)网络安全应急响应技术与常见工具

前言 网络安全应急响应是指为应对网络安全事件&#xff0c;相关人员或组织机构对网络安全事件进行监测、预警、分析、响应和恢复等工作。 一、网络安全应急响应技术 网络安全应急响应组织 构成&#xff1a;网络安全应急响应组织主要由应急领导组和应急技术支撑组构成。领导组负…

Kafka 的一些问题,夺命15连问

kafka-中的组成员 kafka四大核心 生产者API 允许应用程序发布记录流至一个或者多个kafka的主题&#xff08;topics&#xff09;。 消费者API 允许应用程序订阅一个或者多个主题&#xff0c;并处理这些主题接收到的记录流 StreamsAPI 允许应用程序充当流处理器&#xff08;s…

精选5款小程序设计工具,助力设计之路璀璨前行

在当今数字化浪潮中&#xff0c;小程序的重要性日益凸显&#xff0c;无论是电商、社交还是服务领域&#xff0c;小程序都成为连接用户与品牌的关键桥梁。而一款优秀的小程序离不开精心的设计&#xff0c;以下 5 款小程序设计工具将成为你设计事业的得力助手。 一、即时设计 即…

亚马逊评论爬虫+数据分析

爬取评论 做分析首先得有数据&#xff0c;数据是核心&#xff0c;而且要准确&#xff01; 1、爬虫必要步骤&#xff0c;选好框架 2、开发所需数据 3、最后测试流程 这里我所选框架是seleniumrequest&#xff0c;很多人觉得selenium慢&#xff0c;确实不快&#xff0c;仅针对此…

量子计算及其在密码学中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 引言 量子计算概述 定义与原理 发展…

论文笔记:no pose,no problem-基于dust3r输出GS参数实现unpose稀疏重建

1.摘要 我们引入了 NoPoSplat&#xff0c;这是一种前馈模型&#xff0c;能够从未设置的稀疏多视图图像中重建由 3D 高斯参数化的 3D 场景。 我们的模型专门使用光度损失进行训练&#xff0c;在推理过程中实现了实时 3D 高斯重建。 为了消除重建过程中对准确pose的需要&#xff…

godot--自定义边框/选中时样式 StyleBoxTexture

前提知识&#xff1a; stylebox就像一个贴图&#xff0c;把图案贴到控件是。多个stylebox同时生效的话&#xff0c;那当然也有层级之分&#xff0c;上层覆盖下层&#xff08;可以设置透明度来显示下层&#xff09; 关于主题的概念&#xff1a; godot——主题、Theme、StyleB…

ReactPress 安装指南:从 MySQL 安装到项目启动

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 ReactPress 是一个基于 React 的开源发布平台&#xff0c;适用于搭建博客、网站或内容管理系统&#xff08;CMS&#xff09;。本文将详细介绍如何安装 ReactPress&#xff0c;包括…

BMC运维管理:IPMI实现服务器远控制

IPMI实现服务器远控制 实操一、使用IPMI重置BMC用户密码实操二、使用IPMI配置BMC的静态IP实操三、IPMI实现BMC和主机控制操作实操四、ipmitool查看服务器基本信息实操五、ipmitool实现问题定位BMC(Baseboard Management Controller,基板管理控制器)是服务器硬件的一个独立管…