【vue】Pinia-2 安装Pinia,使用store

在这里插入图片描述

1. 安装Pinia

在项目路径下执行npm install pinia

在这里插入图片描述
package.json中查看

在这里插入图片描述

2. 使用store

main.js中添加

import { createPinia } from 'pinia'
const pinia = createPinia()

修改createApp方法
最后示例如下(三处修改)

import { createApp } from 'vue'
//修改1
import { createPinia } from 'pinia'import App from './App.vue'//修改2
const pinia = createPinia()// createApp(App).mount('#app')
//修改3
const app = createApp(App)
app.use(pinia)
app.mount('#app')

在这里插入图片描述

在这里插入图片描述

程序

stores/web.js

import { reactive,ref } from "vue";
import { defineStore } from "pinia";//命名规范:前面加use,后面加Store
export const useWebStore = defineStore("web", ()=>{const web = reactive({title: "abcdfg",url: "https://www.abcdfg.com",})const users = ref(1000)const userAdd=()=>{users.value+=1}return {web,users,userAdd}
});

App.vue

<template><p>{{ webStore.web.title }} </p><p>{{ webStore.web.url }} </p><p>{{ webStore.users }} </p><button @click="webStore.userAdd()">Add User</button></template><script setup>
import { reactive, ref, toRef, toRefs } from 'vue';
import { useWebStore } from './stores/web';const webStore = useWebStore()console.log(webStore.web)
console.log(webStore.users)</script><style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

SimpleImputer缺失数据处理报错解决方案

作者Toby&#xff0c;来源公众号&#xff1a;Python风控建模&#xff0c;SimpleImputer缺失数据处理报错解决方案 今天有学员反馈缺失值代码报错&#xff0c;由于sklearn缺失值处理的包升级&#xff0c;下面把官网最新的缺失值处理代码奉上。 参考https://scikit-learn.org/st…

Java 查找算法

顺序查找 顺序查找算法是一种最简单的查找算法&#xff0c;它的基本思想是从数组的第一个元素开始&#xff0c;逐个比较&#xff0c;直到找到目标元素或遍历完整个数组。 以下是Java实现的顺序查找算法示例代码&#xff1a; public class SequentialSearch {public static i…

设计模式|访问者模式(Visitor Pattern)

文章目录 结构举例优缺点优点缺点代码示例常见面试题访问者模式是一种行为设计模式,它允许在不改变已有类的情况下定义一组新的操作。 这些操作通常分散在不同的类中,但是希望能够对这些类的对象进行统一的处理。 访问者模式的核心思想是将操作从对象结构中分离出来,使得可以…

请把「睡一个好觉」,当成一天里最重要的事来管理

我发现许多人都有这么一种情况&#xff1a;明明知道睡眠很重要&#xff0c;但却总是有意无意地熬夜。 比如&#xff1a; 给自己排了太多的学习和工作量&#xff0c;一不小心就到了凌晨一两点&#xff1b; 总觉得过去的一天什么都没干&#xff0c;宁愿在网上闲逛&#xff0c;也不…

ChatGPT:提升写作效率的必备工具

ChatGPT无限次数:点击直达 html ChatGPT&#xff1a;提升写作效率的必备工具 作为一名有着10年经验的CSDN网站原创文章优质创作者&#xff0c;写作效率对我来说至关重要。在这篇文章中&#xff0c;我将分享如何利用ChatGPT这一强大工具提升写作效率&#xff0c;以及具体的实…

Nacos源码分析,Nacos如何注册一个服务实例?

作为SpringCloudAlibaba微服务架构实战派上下册和RocketMQ消息中间件实战派上下册的作者&#xff0c;我来给大家带来Nacos源码系列的技术文章。 HTTP方式注册服务实例 Naocs使用InstanceController类的HTTP方法register()提供注册服务实例的功能。 /*** 注册服务实例到注册中…

低代码开发平台权威推荐:创新开发、领跑市场!

Gartner是低代码领域的一家权威机构&#xff0c;该机构常常通过"魔力象限"的研究方法&#xff0c;评选全球范围内IT细分领域的产品&#xff0c;来帮助决策者提供重要的咨询建议。本文盘点了Gartner机构推荐的6款低代码平台&#xff1a;Zoho Creator、Mendix、Oracle、…

Java 中建造者模式,请用代码具体举例

建造者模式是一种创建型设计模式&#xff0c;它允许你创建一个复杂对象的不同部分并将它们组装在一起&#xff0c;以产生最终的对象。以下是一个简单的 Java 示例&#xff0c;演示了建造者模式的用法&#xff1a; // 产品类 class Computer {private String cpu;private String…

JVM结构化体系

目录 目录 1.JVM 简介 1.1. 如何理解 JVM 呢&#xff1f; 1.2. 市场主流 JVM 分析&#xff1f; 1.3. 为什么要学习 JVM&#xff1f; 1.4. 字节码底层是如何执行呢&#xff1f; 如何理解 JIT 呢&#xff1f; 为什么 JVM 中解释执行与编译执行的并存&#xff08;混合模式&…

【C++】类和对象③(类的默认成员函数:拷贝构造函数 | 赋值运算符重载)

&#x1f525;个人主页&#xff1a;Forcible Bug Maker &#x1f525;专栏&#xff1a;C 目录 前言 拷贝构造函数 概念 拷贝构造函数的特性及用法 赋值运算符重载 运算符重载 赋值运算符重载 结语 前言 本篇主要内容&#xff1a;类的6个默认成员函数中的拷贝构造函数…

el-drawer二次封装进行可拖拽

1.想要的效果 鼠标放到上面出现箭头显示可拖拽得图标 2.代码实现 2.1封装成自定义指令 // drawerDragDirective.js // 定义指令 const drawerDragDirective {// 指令绑定时的处理函数bind(el, ) {const minWidth 300;const dragDom el.querySelector(.el-drawer);// 创…

掀起区块链开发狂潮!Scaffold-eth带你一键打造震撼DApp

文章目录 前言一、Scaffold-eth是什么&#xff1f;二、安装和配置1.准备工作2.安装3.配置开发环境 三、进阶使用1.放入自己的合约2.部署运行 总结 前言 前面的文章传送&#x1f6aa;&#xff1a;hardhat入门 与 hardhat进阶 在之前的文章中&#xff0c;我们已经探讨了使用Har…

【Linux】提升Linux命令行效率:光标移动和文本操作的键盘快捷键

Just 那么年少 还那么骄傲 两眼带刀 不肯求饶 即使越来越少 即使全部都输掉 也要没心没肺地笑 Just 那么年少 我向你招手 让你看到 我混账到老 天涯海角 天荒地老 只等你摔杯为号 &#x1f3b5; 朴树《Forever Young》 Linux命令行界面&#xff08;CLI&am…

设计模式系列:简单工厂模式

作者持续关注 WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS二次开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;QQ:250325397&#xff09; 目录 定义 特点 使用场景 优缺点 (1) 优点…

故障转移-redis

4.4.故障转移 集群初识状态是这样的&#xff1a; 其中7001、7002、7003都是master&#xff0c;我们计划让7002宕机。 4.4.1.自动故障转移 当集群中有一个master宕机会发生什么呢&#xff1f; 直接停止一个redis实例&#xff0c;例如7002&#xff1a; redis-cli -p 7002 sh…

保持微软Microsoft Teams始终在线的方案

保持微软Microsoft Teams始终在线的方案 背景方案 背景 目前使用微软Teams办公的小伙伴很多&#xff0c;但是长时间不操作电脑就被自动设置成离线状态。对于在电脑前学习书本或者在思考问题的小伙伴就显得不太友好&#xff0c;因为即使我们不操作电脑我们也时刻在电脑前&#…

定时器产生延时停止

1&#xff0c;需求&#xff1a; 当按下按钮SB1,输出信号为0N,指示灯点亮;按下按钮SB2,经过10s的延时后,指示灯熄灭 2&#xff0c;关闭使用定时的常闭触电

Python 如何的调试模式使用 Python 的内置调试器 pdb 或者集成开发环境(IDE)如 PyCharm、Visual Studio Code

Python 的调试模式通常是通过使用 Python 的内置调试器 pdb 或者集成开发环境&#xff08;IDE&#xff09;如 PyCharm、Visual Studio Code 等中的调试工具来实现的。 使用 pdb pdb 是 Python 的标准库中的一个模块&#xff0c;它提供了一个交互式的源代码调试器。你可以使用…

Graphql mock 方案

GraphQL API 的强类型本质非常适合模拟。模拟是 GraphQL Code-First 开发过程的重要组成部分&#xff0c;它使前端开发人员能够构建 UI 组件和功能&#xff0c;而无需等待后端实现。 我们期望基于 TS 强类型定义的特点以及中后台常见列表、详情的数据类型共性&#xff0c;实现…

HG泄露(ctfhub)

工具准备&#xff1a;dirsearch、dvcs-ripper 网络安全之渗透测试全套工具篇&#xff08;内含安装以及使用方法&#xff09;_dvcs-ripper-CSDN博客 dvcs-ripper&#xff1a;一款perl的版本控制软件信息泄露利用工具&#xff0c;支持bzr、cvs、git、hg、svn... tree //树状…