Pinia小菠萝(状态管理器)

Pinia 是一个专为 Vue 3 设计的状态管理库,它借鉴了 Vuex 的一些概念,但更加轻量灵活。下面将详细介绍如何使用 Pinia 状态管理库:

  1. 安装 Pinia

    • 使用 npm:在项目目录下运行npm install pinia
    • 使用 yarn:在项目目录下运行yarn add pinia
  2. 创建 Pinia 实例

    • 在入口文件中引入并创建实例:在项目的入口文件(通常是main.jsmain.ts)中,导入并创建一个 Pinia 实例,然后将其挂载到应用程序上。
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

//1.到入createPinia
import { createPinia } from 'pinia'

//2.执行方法得到实例
const pinia = createPinia()

//3.把pinia实例加入到app应用中

createApp(App).use(pinia).mount('#app')

                2.自定义一个组件,该类编写在components/stores/counter.js

// 导入一个方法 defineStore

import {defineStore} from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter',()=>{
    const count = ref(0)

    //定义修改数据的方法(active 同步 + 异步)
    const increate = () =>{
        count.value++;
    }

    //将对象的方法使用return供组件使用
    return {
        count,
        increate
    }

})

在App.vue中使用该组件

<script setup>
//1.导入 use 打头的方法
import { useCounterStore } from './stores/counter';

//2.执行方法得到store实例对象
const counterStore = useCounterStore();
</script>

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <button @click="counterStore.increate()">Increment</button>
  </div>
</template>

<style scoped>

</style>

测试  结果:

getter方法的定义

    //getter的定义
    const doubeleCount = computed(() =>
        count.value * 2
    )

    //将对象的方法使用return供组件使用
    return {
        count,
        increate,
        doubeleCount
    }
<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>DoubleCount:{{ counterStore.doubeleCount }}</p>
  </div>
</template>

效果:

异步action

首先安装依赖 npm install axios

其次,在组件中导出调用异步的方法getList

// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref,computed } from 'vue'
import axios from 'axios'

const API_URL = 'https://jsonplaceholder.typicode.com/todos'

export const useCounterStore = defineStore('counter',()=>{
    //定义异步action
    const list = ref([])
    const getlist = async () =>{
        const res = await axios.get(API_URL)
        list.value = res.data
        console.log(list.value);
    }
    //将对象的方法使用return供组件使用
    return {
        getlist,
        list
    }
})

在组件中,引入并且调用方法即可

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>DoubleCount:{{ counterStore.doubeleCount }}</p>
    <button @click="counterStore.increate()">Increment</button>
    <button @click="counterStore.getlist()">getListData</button>
    <hr>
    <ol v-for="item in counterStore.list" :key="item.id">
      <li >{{ item.title }}</li>
      <li >{{ item.completed }}</li>
      <li >{{ item.userId }}</li>
    </ol>
  </div>
</template>

效果:

初始界面:

点击getListData按钮后:

storeToRefs解构赋值

首先,引入相关依赖 storeToRefs,然后将响应式对象进行解构赋值

( 方法不需要使用storeToRefs解构赋值 切记!!!)

//针对响应式对象的解构赋值
const { count, doubeleCount, list } = storeToRefs(counterStore);
//对于方法的解构赋值(不需要使用storeToRefs)
const { increate,getlist } = counterStore;

此外,方法解构赋值,在调用方法时,括号加不加都行

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】多分类任务评估指标sklearn和torchmetrics对比

【深度学习】多分类任务评估指标sklearn和torchmetrics对比 说明sklearn代码torchmetrics代码两个MultiClassReport类的对比分析1. 代码结构与实现方式2. 数据处理与内存使用3. 性能与效率 二分类任务评估指标1. 准确率&#xff08;Accuracy&#xff09;2. 精确率&#xff08;P…

[CUDA] 设置sync模式cudaSetDeviceFlags

文章目录 1. 设置cuda synchronize的等待模式2 设置函数3. streamQuery方式实现stream sync等待逻辑Reference 1. 设置cuda synchronize的等待模式 参考资料&#xff1a;https://docs.nvidia.com/cuda/pdf/CUDA_Runtime_API.pdf cuda的 synchronize等待模式分为&#xff1a; Y…

jdk安装升级到jdk17

百度安全验证 有些项目编译不过 找不到类 &#xff0c;实际有&#xff0c;需要升级jdk到17 https://blog.csdn.net/qq_44866828/article/details/130557027 sudo apt-get update sudo apt-get install openjdk-17-jdk 然后修改一下配置路径 也就是环境变量 11 改成17 重新…

cuda、pytorch-gpu安装踩坑!!!

前提&#xff1a;已经安装了acanoda cuda11.6下载 直接搜索cuda11.6 acanoda操作 python版本3.9 conda create -n pytorch python3.9conda activate pytorch安装Pytorch-gpu版本等包 要使用pip安装&#xff0c;cu116cuda11.6版本 pip install torch1.13.1cu116 torchvi…

H.265流媒体播放器EasyPlayer.js网页web无插件播放器:如何优化加载速度

在当今的网络环境中&#xff0c;用户对于视频播放体验的要求越来越高&#xff0c;尤其是对于视频加载速度的期待。EasyPlayer.js网页web无插件播放器作为一款专为现代Web环境设计的流媒体播放器&#xff0c;它在优化加载速度方面采取了多种措施&#xff0c;以确保用户能够享受到…

C语言 | Leetcode C语言题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; /*** Return an array of arrays of size *returnSize.* The sizes of the arrays are returned as *returnColumnSizes array.* Note: Both returned array and *columnSizes array must be malloced, assume caller calls free().*/ type…

Transformer究竟是什么?预训练又指什么?BERT

目录 Transformer究竟是什么? 预训练又指什么? BERT的影响力 Transformer究竟是什么? Transformer是一种基于自注意力机制(Self-Attention Mechanism)的神经网络架构,它最初是为解决机器翻译等序列到序列(Seq2Seq)任务而设计的。与传统的循环神经网络(RNN)或卷…

【春秋云镜】CVE-2023-23752

目录 CVE-2023-23752漏洞细节漏洞利用示例修复建议 春秋云镜&#xff1a;解法一&#xff1a;解法二&#xff1a; CVE-2023-23752 是一个影响 Joomla CMS 的未授权路径遍历漏洞。该漏洞出现在 Joomla 4.0.0 至 4.2.7 版本中&#xff0c;允许未经认证的远程攻击者通过特定 API 端…

51单片机教程(七)- 蜂鸣器

1 项目分析 利用P2.3引脚输出电平变化&#xff0c;控制蜂鸣器的鸣叫。 2 技术准备 1 蜂鸣器介绍 有绿色电路板的一种是无源蜂鸣器&#xff0c;没有电路板而用黑胶封闭的一种是有源蜂鸣器。 有源蜂鸣器和无源蜂鸣器 这里的“源”不是指电源。而是指震荡源。也就是说有源蜂鸣…

十六 MyBatis使用PageHelper

十六、MyBatis使用PageHelper 16.1 limit分页 mysql的limit后面两个数字&#xff1a; 第一个数字&#xff1a;startIndex&#xff08;起始下标。下标从0开始。&#xff09;第二个数字&#xff1a;pageSize&#xff08;每页显示的记录条数&#xff09; 假设已知页码pageNum&…

汽车和飞机研制过程中“骡车”和“铁鸟”

在汽车和飞机的研制过程中&#xff0c;“骡车”和“铁鸟”都扮演着至关重要的角色。 “骡车”在汽车研制中&#xff0c;是一种处于原型车和量产车之间的过渡阶段产物。它通常由不同的零部件组合而成&#xff0c;就像骡子是马和驴的杂交后代一样&#xff0c;取各家之长。“骡车…

MySQL存储目录与配置文件(ubunto下)

mysql的配置文件&#xff1a; 在这个目录下&#xff0c;直接cd /etc/mysql/mysql.conf.d mysql的储存目录&#xff1a; /var/lib/mysql Ubuntu版本号&#xff1a;

RibbitMQ-安装

本文主要介绍RibbitMQ的安装 RabbitMQ依赖于Erlang&#xff0c;因此首先需要安装Erlang环境。分别下载erlang-26.2.5-1.el7.x86_64.rpm、rabbitmq-server-4.0.3-1.el8.noarch.rpm 官网地址&#xff1a;https://www.rabbitmq.com/ 官网文档&#xff1a;https://www.rabbitmq.c…

【Linux】解锁操作系统潜能,高效线程管理的实战技巧

目录 1. 线程的概念2. 线程的理解3. 地址空间和页表4. 线程的控制4.1. POSIX线程库4.2 线程创建 — pthread_create4.3. 获取线程ID — pthread_self4.4. 线程终止4.5. 线程等待 — pthread_join4.6. 线程分离 — pthread_detach 5. 线程的特点5.1. 优点5.2. 缺点5.3. 线程异常…

WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

如何对LabVIEW软件进行性能评估?

对LabVIEW软件进行性能评估&#xff0c;可以从以下几个方面着手&#xff0c;通过定量与定性分析&#xff0c;全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。 一、响应时间和执行效率 时间戳测量&#xff1a;使用LabVIEW的时…

stm32使用串口DMA实现数据的收发

前言 DMA的作用就是帮助CPU来传输数据&#xff0c;从而使CPU去完成更重要的任务&#xff0c;不浪费CPU的时间。 一、配置stm32cubeMX 这两个全添加上。参数配置一般默认即可 代码部分 只需要把上期文章里的HAL_UART_Transmit_IT(&huart2,DATE,2); 全都改为HAL_UART_Tra…

论文1—《基于卷积神经网络的手术机器人控制系统设计》文献阅读分析报告

论文报告&#xff1a;基于卷积神经网络的手术机器人控制系统设计 摘要 本研究针对传统手术机器人控制系统精准度不足的问题&#xff0c;提出了一种基于卷积神经网络的手术机器人控制系统设计。研究设计了控制系统的总体结构&#xff0c;并选用PCI插槽上直接内插CAN适配卡作为上…

「C/C++」C/C++ 之 变量作用域详解

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

JSP ft06 问题几个求解思路整理

刷到这篇文章使用Q-learning去求接JSP ft06 问题用基本Q-learning解决作业车间调度问题(JSP)&#xff0c;以FT06案例为例_q-learning算法在车间调度-CSDN博客 本着贼不走空的原则打算全部copy到本地试下&#xff0c;文章作者使用的tf06.txt在这里获取 https://web.cecs.pdx.e…