在vue3中使用pinia

在vue3项目中使用pinia

  1. 使用vite创建项目和安装pinia依赖
npm init vite@latest
npm i pinia
  1. 从pinia包中解构出defineStore函数创建store片段,这里有一个要注意的点是第一个参数是这个store的id,第二个参数类比vue2中的script内容,state对应data,actions对应methods
import { defineStore } from "pinia";
export const fooStore = defineStore("foo", {state: () => {return {arr: [1, 2, 3],};},actions: {increment() {this.arr.push(this.arr.length + 1);},},
});
  1. 把pinia绑定到入口文件main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
const app = createApp(App);
app.use(createPinia()).mount('#app')
  1. pinia编写完成,开始使用,pinia使用起来是非常简单的。这里有一个点就是发现编写的store文件并没有绑定到main.js上,而是直接从pinia中解构出createPinia作为插件绑定到app,这也说明pinia中每个单独的store模块是按需加载的,并不是一次性全部绑定在app上一次性加载完成。
<template><div><div v-for="item in store.arr" :key="item">{{ item }}</div><button @click="handleClick">add</button></div>
</template>
<script setup>
import { fooStore } from '../store/fooStore';
const store = fooStore()
const handleClick = () => {store.increment();
}
</script>
  1. 总结扩展
1.pinia中编写store文件和vue2的选项式api可以说一模一样。

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

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

相关文章

mybatis05:复杂查询:(多对一,一对多)

mybatis05&#xff1a;复杂查询&#xff1a;&#xff08;多对一&#xff0c;一对多&#xff09; 文章目录 mybatis05&#xff1a;复杂查询&#xff1a;&#xff08;多对一&#xff0c;一对多&#xff09;前言&#xff1a;多对一 &#xff1a; 关联 &#xff1a; 使用associatio…

Java开发环境安装

Java开发环境安装 1、JDK安装2、Maven安装3、MySQL安装4、Tomcat安装5、Nodejs安装 1、JDK安装 java环境搭建问题之——此环境变量太大。此对话框允许将值设置为最长2047个字符。“ 解决方法: Windows下Java环境配置教程 2、Maven安装 Maven配置教程 3、MySQL安装 mysql8…

机器学习和深度学习常见算法

监督学习算法对比 线性回归&#xff08;Linear Regression&#xff09; vs 支持向量机&#xff08;Support Vector Machine, SVM&#xff09; 线性回归&#xff1a; 特点&#xff1a;简单、易于理解和实现&#xff0c;基于线性假设建立输入和输出之间的关系。应用场景&#…

SV-7042V 40W网络有源音柱 智慧灯杆广播音柱

SV-7042V 40W网络有源音柱 一、描述 SV-7042V是深圳锐科达电子有限公司的一款壁挂式网络有源音柱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;其采用防水设计&#xff0c;功率40W。 SV-7042V作为网络广播播放系统的终…

lucas定理+数位dp+组合数学,蓝桥杯真题[组合数问题]

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1.组合数问题 - 蓝桥云课 (lanqiao.cn) 二、解题报告 1、思路分析 lucas > 分解为k进制数 > 一堆只包含若干小于k的数相乘的组合数相乘 mod k 为 0 > 某个组合数或某些组合数 下 < 上 > 求 …

redis怪谈

缓存穿透、击穿、雪崩 《缓存三兄弟》 穿透无中生有key&#xff0c;布隆过滤null隔离 缓存击穿过期key&#xff0c;锁与非期解难题 雪崩大量过期key&#xff0c;过期时间要随机 面试必考三 兄 弟&#xff0c;可用限流来保底 什么是缓存穿透 指查询一个一定不存在的数据&#x…

部署Redis

部署Redis过程简要记录 在家目录创建存放各类软件源码、安装文件、数据、日志、依赖等目录 cd /home/liqiang mkdir sourcecode software app log data lib tmp在 sourcecode 中下载Redis并解压 cd sourcecode wget http://download.redis.io/releases/redis-5.0.4.tar.gz t…

1. Django建站基础

1. Django建站基础 学习开发网站必须了解网站的组成部分, 网站类型, 运行原理和开发流程. 使用Django开发网站必须掌握Django的基本操作, 比如创建项目, 使用Django的操作指令以及开发过程中的调试方法.1.1 网站的定义及组成 网站(Website)是指在因特网上根据一定的规则, 使用…

C++ primer 第十八章

C语言的三大特性&#xff1a;异常处理、命名空间、多重继承。 1.异常处理 异常处理机制允许我们能够将问题的检测与解决过程分离开来。 1.1、抛出异常 在C语言中&#xff0c;我们通过抛出一条表达式来引发一个异常。 当执行一个throw时&#xff0c;程序的控制权从throw转移…

谷歌不收录怎么办?

谷歌不收录首先你要确认自己网站有没有出问题&#xff0c;比如你的网站是否已经公开&#xff0c;rboot是否允许搜索引擎进来&#xff0c;网站架构有没有问题&#xff0c;面包屑的结构是否有问题&#xff0c;确保你的网站没问题 接下来就是优化这个过程&#xff0c;有内容&#…

IPSec简介

起源 随着Internet的发展&#xff0c;越来越多的企业直接通过Internet进行互联&#xff0c;但由于IP协议未考虑安全性&#xff0c;而且Internet上有大量的不可靠用户和网络设备&#xff0c;所以用户业务数据要穿越这些未知网络&#xff0c;根本无法保证数据的安全性&#xff0…

path环境变量的作用

当我把一个运行文件的路径加入到了path环境变量&#xff0c;就可以在cmd命令行随时使用运行。 在path中有两个path上面的是用户的path&#xff0c;下面的是计算机的path

算法竞赛总结(C++) 持续更新中

一、基础算法 排序 快速排序 &#xff08;不常用&#xff09;归并排序 求逆序对 二分 前缀和 一维 二维 差分 一维二维 双指针 离散化 区间合并 位运算&#xff08;lowbit(x)&#xff09; 高精度 ABA-BA*B &#xff08;高精度整数A乘低精度整数b&#xff09;A/B &am…

蓝桥杯 每日2题 day5

碎碎念&#xff1a;哦哈呦&#xff0c;到第二天也是哦哈哟&#xff0c;&#xff0c;学前缀和差分学了半天&#xff01;day6堂堂连载&#xff01; 0.单词分析 14.单词分析 - 蓝桥云课 (lanqiao.cn) 关于这题就差在input前加一个sorted&#xff0c;记录一下下。接下来就是用字…

【Python】浅谈python中的json

前言 最近一直在做开发相关的工作--基于Django的web 平台&#xff0c;其中需要从model层传输数据到view 层做数据展示或者做业务逻辑处理。我们采用通用的Json格式--Json(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;易于阅读和程序解析。 认识Jso…

【MATLAB源码-第10期】基于matlab的pi/4DQPSK,π/4DQPSK的误码率BER理论和实际对比仿真。

1、算法描述 蓝牙是一种被广泛应用的无线通信标准&#xff0c;工作在2.4GHz-2.4835GHz频段范围&#xff0c;所用的调制方式有:GFSK&#xff0c;PI/4-DQPSK。北美第二代数字蜂窝移动通信系统D-AMPS和日本的JDC蜂窝系统均采用PI /4-DQPSK&#xff0c;欧洲的GSM系统采用GMSK。PI /…

水质溶解氧控制器的优势特点

在全球水资源日益紧缺、水质问题愈发严重的现状下&#xff0c;如何科学有效地监测与管理水体溶解氧含量&#xff0c;成为了关乎生态环境保护、水生生物生存以及人类饮水安全的重要课题。溶解氧作为衡量水体自净能力、判断水体是否缺氧、评估水生生态系统健康状况的一项关键指标…

类和对象【一】类和对象简介

文章目录 C的类与C语言结构体的区别【引入类】类的定义类体中的成员函数的实现类中的访问限定符C中class和struct的区别 类的作用域类的实例化类中成员的存储位置类的大小 C的类与C语言结构体的区别【引入类】 类里面不仅可以定义变量还可以定义函数 例 类具有封装性【将在该…

关于nvm node.js的按照

说明&#xff1a;部分但不全面的记录 因为过程中没有截图&#xff0c;仅用于自己的学习与总结 过程中借鉴的优秀博客 可以参考 1,npm install 或者npm init vuelatest报错 2&#xff0c;了解后 发现是nvm使用的版本较低&#xff0c;于是涉及nvm卸载 重新下载最新版本的nvm 2…

云原生数据库海山(He3DB)PostgreSQL版核心设计理念

本期深入解析云原生数据库海山PostgreSQL版&#xff08;以下简称“He3DB”&#xff09;的设计理念&#xff0c;探讨在设计云原生数据库过程中遇到的工程挑战&#xff0c;并展示He3DB如何有效地解决这些问题。 He3DB是移动云受到 Amazon Aurora 论文启发而独立自主设计的云原生数…