Pinia最简单使用(vite+vue3)

文章目录

      • 创建项目·
      • 安装Pinia包
      • main.js注册Pinia
      • 在src下创建store/store.js文件,放入以下内容
      • 在app.vue中的使用(在其他组件也一样的)

创建项目·

npm create vite@latest my-vue-app选vue
选JavaScript
cd my-vue-app
npm install
npm run dev

安装Pinia包

npm install pinia

main.js注册Pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia";
const app = createApp(App)
const pinia = createPinia();
app.use(pinia).mount('#app');

在src下创建store/store.js文件,放入以下内容

import { defineStore } from "pinia";
// 导出方法(每个方法对应一个模块,相当于vuex的模块化,引入组件时按需引入)
export const xj = defineStore("main", {state: () => {return {name: "萧寂",age: 22,sex: "男",};},getters: {},actions: {},
});

在app.vue中的使用(在其他组件也一样的)

<script setup>
//解构出store.js内的需要的方法(每个方法对应一个模块,相当于vuex的模块化)
import { xj } from "./store/store";//将数据变成响应式的方法
import { storeToRefs } from "pinia";// 调用解构出来的方法
const store = xj();//将store内的属性变成响应式的
storeToRefs(store);
//也可以(二者使用方式等价)
// const {name,age} = storeToRefs(store); //此时的name和age也是响应式的,但和ref不同,修改name或者age需要用store调用,如store.name=''//修改数据
const changeName = () => {store.name = "张三";
};//还原/重置所有数据
const reasetName = () => {store.$reset();
};
const reasetName2 = () => {// 这种重置相当于赋初始值操作,比较麻烦,推荐使用方式一store.name = "萧寂";store.age = 22;store.sex = "男";
};//批量修改数据
const pathStore = () => {store.$patch({name: "小红",age: 100,sex: "女",});
};const pathStore2 = () => {// 这种批量修改相当于赋值操作, 比较麻烦,推荐使用方式一store.name = "萧寂哈哈哈哈";store.age = 50;store.sex = "女";
};const piniaData = () => {console.log(store.name);console.log(store.age);console.log(store.sex);
};
</script><template><!-- 获取pinia的数据 --><div>姓名:{{ store.name }}</div><div>年龄: {{ store.age }}</div><div>性别: {{ store.sex }}</div><button @click="changeName">只更改姓名</button><button @click="reasetName">重置所有(方法一)</button><button @click="reasetName2">重置所有(方法二)</button><button @click="pathStore">批量修改数据(方式一)</button><button @click="pathStore2">批量修改数据(方式二)</button><button @click="piniaData">在js里面打印当前数据</button>
</template><style scoped lang="scss"></style>

接下来直接运行就好,我个人就比较喜欢直接使用赋值,直接修改这种,并且支持重置和批量修改,这里并未讲到关于pinia的方法使用,如gettersactions配置,因为我个人目前还没用到这种场景,只用到了全局数据,这里就只讲到了最简单使用就上面的取值赋值重置批量修改在js中打印数据,我目前只用到了这些,如果需要其他更详细的,来我博客找详细的pinia笔记去看

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

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

相关文章

Spark生态圈

Spark 主要用于替代Hadoop中的 MapReduce 计算模型。存储依然可以使用 HDFS&#xff0c;但是中间结果可以存放在内存中&#xff1b;调度可以使用 Spark 内置的&#xff0c;也可以使用更成熟的调度系统 YARN 等。 Spark有完善的生态圈&#xff1a; Spark Core&#xff1a;实现了…

DP之背包基础

目录 DP简介 01背包问题 采药(01背包例题) 完全背包 疯狂的采药(完全背包例题) 背包变式 装箱问题 砝码称重 质数拆分 优化思考 DP简介 全称Dynamic Programming即动态规划 DP算法是解决多阶段决策过程最优化问题的一种常用方法。 多阶段决策过程是指这样一类特…

vue最新源码探索分析

我在github上fork了最新版本vue3.5版本的源码并做了大幅删除&#xff0c;保留最核心的代码&#xff0c;有兴趣的可以看看&#xff0c;欢迎大家提出PR 仓库地址 https://github.com/greatanimalion/core 本项目vue版本3.5.13 为了方便查看与分析&#xff0c;减少心智负担 已…

边缘计算收益稳定

要使自己的PCDN&#xff08;Personal Content Delivery Network&#xff0c;个人内容分发网络&#xff09;收益更稳定&#xff0c;可以从以下几个方面进行努力&#xff1a; 一、选择合适的PCDN平台 平台稳定性&#xff1a;选择技术成熟、稳定性高的PCDN平台&#xff0c;确保内…

CSS系列(39)-- Shapes详解

前端技术探索系列&#xff1a;CSS Shapes详解 ✨ 致读者&#xff1a;探索形状布局的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS Shapes&#xff0c;这个强大的形状布局特性。 基础形状 &#x1f680; 圆形与椭圆 /* 基础圆形 */ .circle {widt…

CSS---实现盒元素div内input/textarea的focus状态时给父元素加属性!

注意兼容性&#xff0c;低版本浏览器无效 要实现当 textarea 文本框获得焦点时&#xff0c;自动给其父元素添加类名或样式&#xff0c;您可以使用 CSS 的 :focus-within 伪类选择器。这个选择器会在元素本身或其任何子元素获得焦点时应用样式。 示例代码 假设您有以下 HTML 结…

2011-2020年各省城镇职工基本医疗保险年末参保人数数据

2011-2020年各省城镇职工基本医疗保险年末参保人数数据 1、时间&#xff1a;2011-2020年 2、来源&#xff1a;国家统计局 3、指标&#xff1a;省份、时间、城镇职工基本医疗保险年末参保人数 4、范围&#xff1a;31省 5、指标解释&#xff1a;参保人数指报告期末按国家有关…

在线excel编辑(luckysheet)

项目地址&#xff1a;Luckysheet: &#x1f680;Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 可以下载项目使用npm安装运行&#xff0c;也可以用cdn 加载excel文件&#xff08;使用luckyexcel&#xff09;&#xff1a; …

Bert中文文本分类

这是一个经典的文本分类问题&#xff0c;使用google的预训练模型BERT中文版bert-base-chinese来做中文文本分类。可以先在Huggingface上下载预训练模型备用。https://huggingface.co/google-bert/bert-base-chinese/tree/main 我使用的训练环境是 pip install torch2.0.0; pi…

NLP工具

1、用python提取PDF中各类文本内容的方法 2、文本分块(Chunking)方法&#xff0c;直接影响LLM应用效果 3、

【无标题】学生信息管理系统界面

网页是vue框架&#xff0c;后端直接python写的没使用框架

macos安装maven以及.bash_profile文件优化

文章目录 下载和安装maven本地仓库配置国内镜像仓库配置.bash_profile文件优化 下载和安装maven maven下载地址 存放在/Library/Java/env/maven目录 本地仓库配置 在maven-3.9.9目录下创建maven-repo目录作为本地文件仓库打开setting配置文件 在setting标签下&#xff0c;添…

提示词工程教程(七):小样本和上下文学习

概述 本教程使用 OpenAI 的 GPT 模型和 LangChain 库探索小样本学习和上下文学习的前沿技术。这些方法使 AI 模型能够使用最少的示例执行复杂的任务&#xff0c;从而彻底改变了我们处理机器学习问题的方式。 主题 传统机器学习通常需要大量数据集进行训练&#xff0c;这非常耗…

用Excel表格在线发布期末考试成绩单

每到期末&#xff0c;发布学生的期末考试成绩单便是老师们的一项重要任务。以往&#xff0c;传统的纸质成绩单分发效率低还易出错&#xff0c;而借助 Excel 表格在线发布&#xff0c;则开启了全新高效模式。 老师们先是精心整理各科成绩&#xff0c;录入精准无误的分数到 Excel…

WPF 绘制过顶点的圆滑曲线(样条,贝塞尔)

项目中要用到样条曲线&#xff0c;必须过顶点&#xff0c;圆滑后还不能太走样&#xff0c;捣鼓一番&#xff0c;发现里面颇有玄机&#xff0c;于是把我多方抄来改造的方法发出来&#xff0c;方便新手&#xff1a; 如上图&#xff0c;看代码吧&#xff1a; -------------------…

python监控数据处理应用服务Socket心跳解决方案

1. 概述 从网页、手机App上抓取数据应用服务&#xff0c;涉及到多个系统集成协同工作&#xff0c;依赖工具较多。例如&#xff0c;使用Frida进行代码注入和动态分析&#xff0c;以实现对网络通信的监控和数据捕获。在这样的集成环境中&#xff0c;手机模拟器、手机中应用、消息…

商品线上个性定制,并实时预览3D定制效果,是如何实现的?

商品线上3D个性化定制的实现涉及多个环节和技术&#xff0c;以下是详细的解释&#xff1a; 一、实现流程 产品3D建模&#xff1a; 是实现3D可视化定制的前提&#xff0c;需要对产品进行三维建模。可通过三维扫描仪或建模师进行建模&#xff0c;将产品的外观、结构、材质等细…

开源 SOAP over UDP

简介 看到有人想要实现两个 EXE 之间的互动。这可以采用 RPC 的方式嘛。 Delphi 现成的 RPC 框架&#xff0c;比如 WebService&#xff0c;比如 DataSnap&#xff1b; 当然&#xff0c;github 上面还有第三方开源的 XMLRPC 等等。 为啥要搞一个 UDP Delphi 的 WebService …

【Laravel】接口的访问频率限制器

Laravel 接口的访问频率&#xff0c;你可以在 Laravel 中使用速率限制器&#xff08;Rate Limiter&#xff09;。以下是一个详细的步骤&#xff0c;展示如何为这个特定的 API 路由设置速率限制&#xff1a; 1. 配置 RouteServiceProvider 首先&#xff0c;确保在 App\Provide…

Vue.use()和Vue.component()

当很多页面用到同一个组件&#xff0c;又不想每次都在局部注册时&#xff0c;可以在main.js 中全局注册 Vue.component()一次只能注册一个组件 import CcInput from /components/cc-input.vue Vue.component(CcInput);Vue.use()一次可以注册多个组件 对于自定义的组件&#…