【Pinia】Pinia的概念、优势及使用方式

学习公司的项目,发现用到了Pinia,于是上网学习了一下,发现了一篇比较优秀的文章,于是将极少部分放到此记录学习,原文链接在末尾。

是什么

官网解释:

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。

从上面官网的解释不难看出,pinia和Vuex的作用是一样的,它也充当的是一个存储数据的作用,存储在pinia的数据允许我们在各个组件中使用。

相较于vuex的优点

●Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。
●pinia中只有state、getter、action,抛弃了Vuex中的Mutation,Vuex中mutation一直都不太受小伙伴们的待见,pinia直接抛弃它了,这无疑减少了我们工作量。
●pinia中action支持同步和异步
●良好的Typescript支持,毕竟我们Vue3都推荐使用TS来编写,这个时候使用pinia就非常合适了
●无需再创建各个模块嵌套了,Vuex中如果数据过多,我们通常分模块来进行管理,稍显麻烦,而pinia中每个store都是独立的,互相不影响。
●体积非常小,只有1KB左右。 ●pinia支持插件来扩展自身功能。 ●支持服务端渲染。

使用

安装

yarn add pinia
//或者使用 npm
npm install pinia

挂载

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

创建某一模块相关的store

/src/store/user.tsimport { defineStore } from 'pinia'// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {// 其它配置项
})

创建store很简单,调用pinia中的defineStore函数即可,该函数接收两个参数:
●name:一个字符串,必传项,该store的唯一id。
●options:一个对象,store的配置项,比如配置store内的数据,修改数据的方法等等。
我们可以定义任意数量的store,因为我们其实一个store就是一个函数,这也是pinia的好处之一,让我们的代码扁平化了,这和Vue3的实现思想是一样的。

使用该store

/src/App.vue<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
console.log(store);
</script>

使用store很简单,直接引入我们声明的useUsersStore 方法即可,我们可以先看一下执行该方法输出的是什么:

添加state

我们需要存放的数据就放在options对象中的state属性内。
假设我们往store添加一些任务基本数据,修改user.ts代码。

/src/store/user.tsimport { defineStore } from 'pinia'export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},
});

读取state

修改App.vue,通过解构赋值拿取数据,并让这几个数据显示出来。
注意:需要利用pinia的storeToRefs函数,将state中的数据变为响应式。

<template><img alt="Vue logo" src="./assets/logo.png" /><p>姓名:{{ name }}</p><p>年龄:{{ age }}</p><p>性别:{{ sex }}</p>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
</script>

结果:
在这里插入图片描述

修改state

<template><h1>我是child组件</h1><p>姓名:{{ name }}</p><p>年龄:{{ age }}</p><p>性别:{{ sex }}</p><button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
const changeName = () => {store.name = "小猪课堂";
};
</script>

重置state

有时候我们修改了state数据,想要将它还原,比如用户填写了一部分表单,突然想重置为最初始的状态。

<button @click="reset">重置store</button>
// 重置store
const reset = () => {store.$reset();
};

批量更改state数据

store.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1 })state.hasChanged = true
})

替换整个state

store.$state = { counter: 666, name: '张三' }

添加getter

export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},getters: {getAddAge: (state) => {return state.age + 100;},},
});

使用getter

<template><p>新年龄:{{ store.getAddAge }}</p></template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
</script>

直接在标签上使用了store.gettAddAge方法,这样可以保证响应式

getter中调用其它getter

export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},getters: {getAddAge: (state) => {return state.age + 100;},getNameAndAge(): string {return this.name + this.getAddAge; // 调用其它getter},},
});

getter传参

export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},getters: {getAddAge: (state) => {return (num: number) => state.age + num;},getNameAndAge(): string {return this.name + this.getAddAge; // 调用其它getter},},
});
 <p>新年龄:{{ store.getAddAge(1100) }}</p>

添加actions

export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},actions: {saveName(name: string) {this.name = name;},},
});

使用actions

//app.vue
const saveName = () => {store.saveName("我是小猪");
};

汇总代码

main.ts代码:

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

user.ts代码:

import { defineStore } from "pinia";// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore("users", {state: () => {return {name: "小猪课堂",age: 25,sex: "男",};},getters: {getAddAge: (state) => {return (num: number) => state.age + num;},getNameAndAge(): string {return this.name + this.getAddAge; // 调用其它getter},},actions: {saveName(name: string) {this.name = name;},},
});

App.vue代码:

<template><img alt="Vue logo" src="./assets/logo.png" /><p>姓名:{{ name }}</p><p>年龄:{{ age }}</p><p>性别:{{ sex }}</p><p>新年龄:{{ store.getAddAge(1100) }}</p><p>调用其它getter:{{ store.getNameAndAge }}</p><button @click="changeName">更改姓名</button><button @click="reset">重置store</button><button @click="patchStore">批量修改数据</button><button @click="saveName">调用aciton</button><!-- 子组件 --><child></child>
</template>
<script setup lang="ts">
import child from "./child.vue";
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from "pinia";
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
const changeName = () => {store.name = "张三";console.log(store);
};
// 重置store
const reset = () => {store.$reset();
};
// 批量修改数据
const patchStore = () => {store.$patch({name: "张三",age: 100,sex: "女",});
};
// 调用actions方法
const saveName = () => {store.saveName("我是小猪");
};
</script>

原文:
大菠萝!这一次彻底搞懂Pinia!(保姆级教程)

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

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

相关文章

2023年中国场馆产业研究报告

第一章 行业综述 1.1 定义与分类 场馆&#xff0c;作为一个多元化和充满活力的行业&#xff0c;为人们提供了一个为不同目的而聚集的空间。无论是为了活动、表演、展览还是聚会&#xff0c;场馆都在为社区的社会、文化和经济建设做出了不可或缺的贡献。 场馆是一个为举办各类…

VR全景展示的功能有哪些?你了解多少?

VR全景展示作为一种全新的视觉体验技术&#xff0c;能够为人们带来强烈的视觉效果以及沉浸式的观感&#xff0c;在旅游、房地产、车展、博物馆等都有着十分广泛的应用。这种富媒体技术&#xff0c;具有很好的交互性和沉浸感&#xff0c;能够带给大家更好的体验&#xff0c;那么…

uni-app实现web-view图片长按下载

<template><view><web-view :webview-styles"webviewStyles" :src"webUrl"></web-view></view> </template> uniapp的web-view中图片无法长按保存&#xff0c;IOS下是正常的&#xff0c;但是Android下长按无反应 解…

如何统计iOS产品不同渠道的下载量?

一、前言 在开发过程中&#xff0c;Android可能会打出来很多的包&#xff0c;用于标识不同的商店下载量。原来觉得苹果只有一个商店&#xff1a;AppStore&#xff0c;如何做出不同来源的统计呢&#xff1f;本篇文章就是告诉大家如何做不同渠道来源统计。 二、正文 先看一下苹…

【C++模拟实现】map、set容器的模拟实现

【C模拟实现】map、set容器的模拟实现 目录 【C模拟实现】map、set容器的模拟实现map、set模拟实现的代码&#xff08;insert部分&#xff09;部分一&#xff1a;红黑树的迭代器以及红黑树部分二&#xff1a;对set进行封装部分三&#xff1a;对map进行封装 遇到的问题以及解决方…

Stability AI推出Stable Audio;ChatGPT:推荐系统的颠覆者

&#x1f989; AI新闻 &#x1f680; Stability AI推出Stable Audio&#xff0c;用户可以生成个性化音乐片段 摘要&#xff1a;Stability AI公司发布了一款名为Stable Audio的工具&#xff0c;用户可以根据自己的文本内容自动生成音乐或音频。免费版可生成最长20秒音乐片段&a…

JL653—一个基于ARINC653的应用程序仿真调试工具

JL653是安装在PC机Windows操作系统上面的一层接插件&#xff0c;它能够真实地模拟ARINC653标准规定的功能性行为&#xff0c;从而可以供研发人员在PC机Windows环境下高效、快速的进行基于ARINC653的应用程序的开发、调试等。 JL653提供了ARINC 653 Part 1中要求的以下服务&…

手把手教你搭建农产品商城小程序:详细步骤解析

随着移动互联网的普及&#xff0c;越来越多的人开始关注如何在手机上进行购物&#xff0c;尤其是对于农产品这类日常生活所需品。本文将手把手教你搭建一个农产品商城小程序&#xff0c;让你轻松实现在手机上购买农产品的愿望。 一、登录乔拓云网后台 首先&#xff0c;我们需要…

ARM Linux DIY(十一)板子名称、开机 logo、LCD 控制台、console 免登录、命令提示符、文件系统大小

文章目录 前言板子名称uboot Modelkernel 欢迎词、主机名 开机 logoLCD 控制台console 免登录命令提示符文件系统大小 前言 经过前面十篇文章的介绍&#xff0c;硬件部分调试基本完毕&#xff0c;接下来的文章开始介绍软件的个性化开发。 板子名称 uboot Model 既然是自己的…

Lua学习笔记:在Visual Studio中调试Lua源码和打断点

前言 本篇在讲什么 调试Lua源码 本篇需要什么 对Lua语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级标题 &#x1f448; &…

HTTP状态码301(永久重定向)不同Web服务器的配置方法

文章目录 301状态码通常在那些情况下使用301永久重定向配置Nginx配置301永久重定向Windows配置IIS301永久重定向PHP下的301重定向Apache服务器实现301重定向 301重定向是否违反相关法规&#xff1f;推荐阅读 当用户或搜索引擎向服务器发出浏览请求时&#xff0c;服务器返回的HT…

Linux 企业级夜莺监控分析工具远程访问

目录 前言 1. Linux 部署Nightingale 2. 本地访问测试 3. Linux 安装cpolar 4. 配置Nightingale公网访问地址 5. 公网远程访问Nightingale管理界面 6. 固定Nightingale公网地址 前言 夜莺监控是一款开源云原生观测分析工具&#xff0c;采用 All-in-One 的设计理念&…

elasticsearch17-自动补全

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

【面试题】智力题

文章目录 腾讯1000瓶毒药里面只有1瓶是有毒的&#xff0c;问需要多少只老鼠才能在24小时后试出那瓶有毒。有两根不规则的绳子&#xff0c;两根绳子从头烧到尾均需要一个小时&#xff0c;现在有一个45分钟的比赛&#xff0c;裁判员忘记带计时器&#xff0c;你能否通过烧绳子的方…

[k8s] pod的创建过程

pod的创建过程 定义 Pod 的规范&#xff1a; apiVersion: v1 kind: Pod metadata:name: my-pod spec:containers:- name: my-containerimage: nginx:latest创建 Pod 对象&#xff1a; 使用 kubectl 命令行工具或其他客户端工具创建 Pod 对象&#xff1a; kubectl create -f…

线程锁(Thread Lock)和进程锁(Process Lock)

在Python中&#xff0c;线程锁&#xff08;Thread Lock&#xff09;和进程锁&#xff08;Process Lock&#xff09;具有相似的功能&#xff0c;但它们分别用于同步多线程和多进程环境中的资源访问。 进程锁 进程锁&#xff08;Process Lock&#xff09;可以用于在多进程环境中…

千巡翼X1 让航测无人机更小更轻更高效

利用无人机进行航空摄影测量&#xff0c;已成为测绘外业生产的主要方式&#xff0c;不仅方便快捷&#xff0c;更能全面准确获得成果。近年来&#xff0c;凭借快速高效、机动灵活、安全可靠、低成本等诸多优势&#xff0c;小型多旋翼无人机逐渐成为一些航测项目作业的新利器。 千…

新手如何开始Microstation CE版二次开发

一步步学习MicroStation CE MDL&#xff08;C&#xff09;开发 - 技术资料库 - Bentley 中国优先社区 - Bentley Communities https://communities.bentley.com/communities/other_communities/chinafirst/w/chinawiki/57704/microstation-ce-mdl-c一步步学习MicroStation CE A…

opencv 基础(持续更新中)

1 前言 https://www.couragesteak.com/ 2 安装 3 基础属性demo 打开一张图片&#xff1a; import cv2img cv2.imread(./girl.jpg)print(img.shape) # (1536, 1024, 3) 数组形状 print(type(img)) # numpy 数组 print(img) # 三维数组&#xff08;彩色图片&am…

产品经理学习笔记

产品文档之BRD、MRD和PRD - 知乎BRD、MRD和PRD一起被认为是从市场到产品需要形成的标准规范文档&#xff1a; 1、BRD&#xff08;Business Requirement Document&#xff09;&#xff0c;商业需求文档&#xff0c;是一份产品商业论证报告&#xff0c;基于商业目标或价值所描述的…