Vue3中的pinia使用,入门教程

文章目录

      

文章目录

pinia组成部分

pinia使用流程

注意Store获取到后不能解构,否则失去响应式

一、pinia原理?

  • 功能:管理全局共享数据,pinia与vuex功能一样
  • 优势:pinia相对于vuex增加了对ts的支持,对响应式的支持

二、组成部分

  • State:存储共享的数据
  • Actions:可以包含任意异步操作,如axios,提交(dispatch),action自动commit给mutation,保证所有数据同步更新,其他方法,会使部分数据失真
  • Mutations:pinia已取消,vuex中会有

1. pinia使用流程:

  • 安装依赖,下载包

npm install pinia

  • main.js中引入pinia并创建容器挂载到根实例上
//引入stores暴露出的pinia的实例
import pinia from './stores'createApp(App).use(pinia).mount('#app')
  • 创建stores文件夹和index.js文件(这个文件以后基本不用管了)
import { createPinia } from "pinia";const pinia = createPinia()export default pinia
  • stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。(类似vuex的模块化)
  • defineStore 是需要传参数的:
  1. 第一个参数是id,就是一个唯一的值,简单点说就可以理解成是一个命名空间.
  2. 第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,第二个是 getters,第三个是 actions。
//定义关于counter的store
import {defineStore} from 'pinia'/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,第三个是 actions。
*/
const useCounter = defineStore("counter",{state:() => ({count:66,}),getters: {},actions: {}
})//暴露这个useCounter模块
export default useCounter

注意:返回的函数统一使用useXXX作为命名方案,这是约定的规定。

  • 然后再组件中使用:

<template>
    <!-- 在页面中直接使用就可以了 不用 .state-->
  <div>展示pinia的counter的count值:{{counterStore.count}}</div>

</template>

<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter'
// 因为是个方法,所以我们得调用一下
const counterStore = useCounter()

</script>
 

1.2.注意Store获取到后不能解构,否则失去响应式

<template>
  <div>展示pinia的counter的count值:{{counterStore.count}}</div>
  <div>展示解构出来的pinia的counter的count值:{{count}}</div>
  <button @click="addCount">count+1</button>
</template>

<script setup>
    import useCounter from '../stores/counter'
    
    const counterStore = useCounter()
    
    const {count} = counterStore
    function addCount(){
      //这里可以直接操作count,这就是pinia好处,在vuex还要commit在mutaitions修改数据
      counterStore.count++
    }
<script/>

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

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

相关文章

程序员如何“升级打怪”?我用了这几个“歪瓜”!

不会吧&#xff1f;不会吧&#xff1f;计算机本命专业出身、以及半路出家的&#xff0c;混了几年了&#xff0c;还在新手村&#xff1f;对得起这几年摸的鱼&#xff1f; 思考一下&#xff1a;如何从小白一跃为大师&#xff0c;从此走上人生巅峰、迎娶白富美&#xff1f;变强只…

Java --- JVM之垃圾回收相关知识概念

目录 一、System.gc() 二、内存溢出与内存泄漏 2.1、内存溢出 2.2、内存泄漏 三、Stop the world 四、垃圾回收的并行与并发 4.1、并发 4.2、并行 4.3、并行 vs 并发 4.4、垃圾回收的并发与并行 五、安全点与安全区域 5.1、安全点 5.2、安全区域 六、引用 6.1…

3.基于多能互补的热电联供微网优化运行复现(matlab代码)

0.代码链接 基于多能互补的热电联供微电网/综合能源系统优化运行&#xff08;Matlab程序Yalmip&#xff0b;Cplex求解&#xff09;_工业综合能源系统资源-CSDN文库 2. 主要内容&#xff1a;代码主要做的是多能互补的热电联供型微网优化运行模型&#xff0c;在需求侧对负荷类型…

hive数据库将非分区表数据迁移到分区表

文章目录 一、非分区表数据迁移到分区表 一、非分区表数据迁移到分区表 业务运行一段时间后非分区表的数据量非常大&#xff0c;需要创建一张分区表并将数据迁移到分区表中。 原表建表语句&#xff1a; create table user(id String default null comment 主键id,name St…

c# 文件操作

文件操作 namespace demo1;class proj {/// <summary>///文件&#xff1a;///注册表是Micrsoft windows 中的一个重要的数据库&#xff0c;用于存储系统和应用恒旭的设置信息///主要了解文件和注册表的创建、打开、读取、写入、修改、删除/// </summary>//////文件…

Android Studio 引入Xui框架-简单应用

Android Studio Flamingo | 2022.2.1 Patch 2 Android 11开发、Gradle Version 8.0、 jdk17 源代码&#xff1a;GitHub - xuexiangjys/XUI: &#x1f48d;A simple and elegant Android native UI framework, free your hands! (一个简洁而优雅的Android原生UI框架&#xff…

【Chrony】一个多功能的NTP实现

在现代的计算机系统中&#xff0c;准确的时间同步对于许多关键应用和系统的正常运行至关重要。Linux操作系统提供了多种时间同步工具&#xff0c;其中Chrony是一款备受推崇的工具&#xff0c;为Linux系统提供了更准确、更稳定的时间同步功能。本文将介绍Chrony的工作原理、优点…

亚信面试题

文章目录 2.Java基本数据类型?3.对象三大特征?4.多态和封装的含义及作用?5.方法重写和方法重载的区别?6.String/StringBuffer和StringBuilder区别?7.String常用方法有哪些?8.==和equals有什么区别?9.两个对象hashCode相同equals为true吗?10.ArrayList和LinkedList有什么…

WordPress网站迁移实战经验

前几日,网站服务器到期,换了服务商,就把我的WordPress的网站迁移到本地电脑了。方便以后文章迁移。 本次迁移网站主要经历以下几个步骤。 1.域名转出。 2.备份数据库及网站文件下载。 3.重新搭建WordPress网站。 4.网站文件及数据库导入。 下面详细介绍下每个步骤的操作…

Linux 安全 - 扩展属性xattr

文章目录 前言一、简介二、扩展属性命名空间2.1 简介2.2 security扩展属性2.3 System扩展属性2.4 Trusted扩展属性2.5 User扩展属性 三、用户空间使用3.1 setfattr/getfattr3.2 setxattr/getxattr/listxattr 参考资料 前言 一、简介 xattr - Extended attributes扩展属性是与…

【狂神说Java】redis

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;【狂神说Java】 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c…

【done】剑指 Offer 53 - II:0~n-1中缺失的数字

力扣&#xff0c;https://leetcode.cn/problems/que-shi-de-shu-zi-lcof/description/ solution1 线性扫描&#xff0c;一般情况 class Solution {public int takeAttendance(int[] records) {boolean[] visited new boolean[records.length 1];Arrays.fill(visited, fals…

解压过大文件(超过4GB)传输至服务器的问题

不能在终端执行unzip指令了。 1、通过终端 7za x 文件名.zip 2、通过jupyter notebook代码来解决 import zipfilef zipfile.ZipFile("dataset.zip",r) # 压缩文件在jupyter中的位置 for file in f.namelist():f.extract(file,"./dataset") …

docker部署gitlab 12.10.6过程

docker部署gitlab 12.10.6过程 1.docker安装 docker指定版本安装【官方文档步骤】 官方文档地址&#xff1a;https://docs.docker.com/engine/install/centos/ # 1.安装yum工具及设置docker-ce镜像库 sudo yum install -y yum-utils# 国外的镜像下载太慢了改成阿里云镜像库 s…

pipeline传参给job

场景&#xff1a;pipeline实现自动部署&#xff0c;job实现自动测试&#xff0c;但是只有部署dddd环境时&#xff0c;才调自动测试的job&#xff0c;所以需要在调自动测试job时&#xff0c;把参数传给测试job 上一个任务会显示下一步调谁 ------------------------------------…

解决:ERR This instance has cluster support disabled

问题描述 在使用Redisson做分布式锁&#xff0c;连接redis时&#xff0c;提示以下错误&#xff1a; 问题定位 通过指令&#xff1a; cluster nodes查看&#xff0c;发现 出现这种提示的原因&#xff0c;是因为此Redis实例已经禁用了集群(默认状态下是禁用状态)。 解决 …

Flowable工作流高级篇

文章目录 一、任务分配和流程变量1.任务分配1.1 固定分配1.2 表达式分配1.2.1 值表达式1.2.2 方法表达式 1.3 监听器分配 2.流程变量2.1 全局变量2.2 局部变量2.3 案例讲解 二、候选人和候选人组1.候选人1.1 定义流程图1.2 部署和启动流程实例1.3 任务的查询1.4 任务的拾取1.5 …

Linux进程通信——消息队列

概念 消息队列&#xff0c;是消息的链接表&#xff0c;存放在内核中。一个消息队列由一个标识符(即队列ID)来标识。 特点 1.消息队列是面向记录的&#xff0c;其中的消息具有特定的格式以及特定的优先级。&#xff08;消息队列是结构体&#xff09; 2.消息队列独立于发送与接…

jemalloc 库的编译(Linux 下面)

1、从 github 上面下载源代码 2、解压到编译的目录里面去 3、安装 autoconf 工具链 4、执行 autogen.sh&#xff0c;成功&#xff08;done&#xff09;后就直接 make -j编译线程数 如果没有执行下面的配置语句编译出来的 jemalloc 库&#xff0c;是不能被其它程序链接C符号&…

如何制作动态表情包?一个方法快学起来

在当代的通讯工具中&#xff0c;动态表情包已经是人们日常交流不可缺少的一部分了。但是&#xff0c;很多时候网络上常见的动态表情包不能够很好表达出我们的需求时应该怎么办呢&#xff1f;这时候&#xff0c;我们可以使用gif动图制作&#xff08;https://www.gif.cn/&#xf…