当前位置: 首页 > news >正文

Pinia 上手使用(store、state、getters、actions)

参考链接:https://juejin.cn/post/7121209657678364685
Pinia官方:https://pinia.vuejs.org/zh/introduction.html

一、安装

npm i pinia -S

二、main.js 引入

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

三、创建 store

  • 可通过 defineStore 创建 多个 store (这与 vuex 只可以创建一个 store不同),所以 不再需要 modules(每个 store 便是一个模块)
  • 不再使用 mutations 作为 直接修改state 的方式
  • 支持以往的 options 创建形式,也可以使用 组合式函数定义一个store(像 setup 一样)

1、通过 options 创建

例如在 src下新建 piniaStore/storeA.js

import { defineStore } from "pinia";export const storeA = defineStore("storeA", {state: () => {return {piniaMsg: "hello pinia",};},getters: {},actions: {},
})

2、通过组合式函数创建

  • ref() 就是 state 属性
  • computed() 就是 getters
  • function() 就是 actions
export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

四、获取状态

1、在 <script setup> 中

<template><div></div>
</template><script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()console.log(piniaStoreA.piniaMsg); //hello pinia
</script>

2、在 setup( ) 中

<script>
import { useCounterStore } from '../stores/counter'export default defineComponent({setup() {const counterStore = useCounterStore()return { counterStore }},computed: {quadrupleCounter() {return this.counterStore.count * 2},},methods: {incrementAndPrint() {// 使用方法、状态,通过整个 store(因为没有解构)this.counterStore.increment()console.log('New Count:', this.counterStore.count)},},
})
</script>

五、修改状态

1、直接赋值修改

<template><div>{{ piniaStoreA.piniaMsg }}</div>
</template><script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()console.log(piniaStoreA.piniaMsg); //hello piniapiniaStoreA.piniaMsg = 'hello juejin'
console.log(piniaStoreA.piniaMsg); //hello juejin
</script>

2、使用 $patch 修改单个或多个状态

  • 可传入对象 修改
import { defineStore } from "pinia";export const storeA = defineStore("storeA", {state: () => {return {piniaMsg: "hello pinia",name: "xiaoyue",};},getters: {},actions: {},
});
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
console.log(piniaStoreA.name); //xiaoyuepiniaStoreA.$patch({piniaMsg: 'hello juejin',name: 'daming'
})console.log(piniaStoreA.name);//daming
  • 也可传入 函数 修改
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()piniaStoreA.$patch((state) => {state.name = 'daming'state.piniaMsg = 'hello juejin'
})

3、在 actions 中进行修改

  • Pinia 去掉了 mutations,所以在 actions 中修改 state 就行
  • 使用 actions 时,像调用 methods 一样直接调用即可
import { defineStore } from "pinia";
export const storeA = defineStore("storeA", {state: () => {return {piniaMsg: "hello pinia",name: "xiao yue",};},actions: {setName(data) {this.name = data;},},
});
// script中使用
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()piniaStoreA.setName('daming')
<!-- 模板中使用 -->
<button @click="piniaStoreA.setName()">点击</button>

4、使用 $reset 重置 state

Pinia 可以使用 $reset 将状态 重置为初始值

import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()piniaStoreA.$reset()

六、解构

在上述使用中,我们都是通过 整个 store 来使用内部的 state 等,怎么解构使用呢?

1、错误示范

传统的 ES6解构 会使 state 失去响应式

<template><div>{{ name }}</div>
</template><script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()let { piniaMsg, name } = piniaStoreApiniaStoreA.$patch({name: 'daming'    // 更新失败
})
</script>

2、正确方式

Pinia 提供了一个解构方法 storeToRefs

<template><div>{{ name }}</div>
</template><script setup>
import { storeA } from '@/piniaStore/storeA'
import { storeToRefs } from 'pinia'
let piniaStoreA = storeA()let { piniaMsg, name } = storeToRefs(piniaStoreA)piniaStoreA.$patch({name: 'daming'
})
</script>

七、getters

1、使用 getters

  • Pinia 中的 getters 和 Vuex 的 getters 用法是一致的, 也具有 缓存 特性
  • getter1 访问 getter2 时,通过 this
import { defineStore } from "pinia";export const storeA = defineStore("storeA", {state: () => {return {count1: 1,count2: 2,};},getters: {sum (state) {console.log('我被调用了!')return state.count1 + state.count2;},sum2 () {// 访问其他 getter 时,通过thisreturn this.sum + 1}},
});
<template><div>{{ piniaStoreA.sum }}</div>
</template><script setup>
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()console.log(piniaStoreA.sum) //3
</script>

2、 缓存验证

import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
console.log(piniaStoreA.sum)
console.log(piniaStoreA.sum)
console.log(piniaStoreA.sum)
piniaStoreA.count1 = 2
console.log(piniaStoreA.sum)

在这里插入图片描述

八、辅助函数

若你更倾向于使用 选项式API,可以试试 Pinia 的 映射辅助函数,具体使用方式请 查看下一篇

相关文章:

Pinia 上手使用(store、state、getters、actions)

参考链接&#xff1a;https://juejin.cn/post/7121209657678364685 Pinia官方&#xff1a;https://pinia.vuejs.org/zh/introduction.html 一、安装 npm i pinia -S二、main.js 引入 import { createApp } from "vue" import App from "./App.vue" impor…...

C++小项目之文本编辑器mynote(1.0.0版本)

2023年5月19日&#xff0c;周五晚上&#xff1a; 今天晚上突然想写一个运行在命令行上的文本编辑器&#xff0c;因为平时写文本时老是要创建新的文本文件&#xff0c;觉得太麻烦了。捣鼓了一个晚上&#xff0c;才选出一个我觉得比较满意的。我把这个程序添加到了系统环境变量中…...

人工智能的界面革命,消费者与企业互动的方式即将发生变化。

本文来源于 digitalnative.substack.com/p/ais-interface-revolution 描述了一种社会现象&#xff1a; 随着真实友谊的减少和虚拟友谊的增加&#xff0c;越来越多的人开始将AI聊天机器人视为自己的朋友&#xff0c;甚至建立了深厚的情感纽带。这可能与当前人们越来越孤独的现实…...

深度学习课程:手写体识别示例代码和详细注释

Pytorch 的快速入门&#xff0c;参见 通过两个神经元的极简模型&#xff0c;清晰透视 Pytorch 工作原理。本文结合手写体识别项目&#xff0c;给出一个具体示例和直接关联代码的解释。 1. 代码 下面代码展示了完整的手写体识别的 Python 程序代码。代码中有少量注释。在本文后…...

10-03 单元化架构设计

设计原则 透明 对开发者透明 在做实现时&#xff0c;不依赖于单元划分和部署对组件透明 在组件运行时&#xff0c;不感知其承载单元对数据透明 数据库并不知道为哪个单元提供服务 业务可分片 系统业务复杂度足够高系统可以按照某一维度进行切分系统数据必须可以被区分 业务…...

JAVA—实验3 继承与多态

一、实验目的 1.掌握类的继承机制 2.掌握抽象类的定义方法 2.熟悉类中成员变量和方法的访问控制 3.熟悉成员方法或构造方法的多态性 二、实验内容 1. Circle类及其子类 【问题描述】 实现类Circle&#xff0c;半径为整型私有数据成员 1&#xff09;构造方法&#xff1a;参数为…...

TCP协议和相关特性

1.TCP协议的报文结构 TCP的全称为&#xff1a;Transmission Control Protocol。 特点: 有连接可靠传输面向字节流全双工 下面是TCP的报文结构&#xff1a; 源端口和目的端口&#xff1a; 源端口表示数据从哪个端口传输出来&#xff0c;目的端口表示数据传输到哪个端口去。…...

【SpringCloud组件——Eureka】

前置准备&#xff1a; 分别提供订单系统&#xff08;OrderService&#xff09;和用户系统&#xff08;UserService&#xff09;。订单系统主要负责订单相关信息的处理&#xff0c;用户系统主要负责用户相关信息的处理。 一、微服务当中的提供者和消费者 1.1、概念 服务提供…...

JVM面试题(一)

JVM内存分哪几个区&#xff0c;每个区的作用是什么? java虚拟机主要分为以下几个区: JVM中方法区和堆空间是线程共享的&#xff0c;而虚拟机栈、本地方法栈、程序计数器是线程独享的。 &#xff08;1&#xff09;方法区&#xff1a; a. 有时候也成为永久代&#xff0c;在该区内…...

c# 无损压缩照片大小,并且设计了界面,添加了外部Ookii.Dialogs.dll,不一样的选择文件夹界面,并且可以把外部dll打包进exe中

c# 无损压缩照片大小&#xff0c;并且设计了界面&#xff0c;添加了外部Ookii.Dialogs.dll&#xff0c;不一样的选择文件夹界面&#xff0c;并且可以把外部dll打包进exe中 using System; using System.Collections; using System.Collections.Generic; using System.ComponentM…...

《统计学习方法》——隐马尔可夫模型(上)

引言 这是《统计学习方法》第二版的读书笔记&#xff0c;由于包含书上所有公式的推导和大量的图示&#xff0c;因此文章较长&#xff0c;正文分成三篇&#xff0c;以及课后习题解答&#xff0c;在习题解答中用Numpy实现了维特比算法和前向后向算法。 《统计学习方法》——隐马…...

ElasticSearch删除索引【真实案例】

文章目录 背景分析解决遇到的问题 - 删除超时报错信息解决办法1:调大超时时间解决办法2:调大ES堆内存参考背景 项目中使用了ELK技术栈实现了日志管理,但是日志管理功能目前并没有在生产上实际使用。 但ELK程序依然在运行,导致系统磁盘发生告警,剩余可用磁盘不足10%。 所以…...

基于FPGA+JESD204B 时钟双通道 6.4GSPS 高速数据采集设计(三)连续多段触发存储及传输逻辑设计

本章将完成数据速率为 80MHz 、位宽为 12bits 的 80 路并行采样数据的连续多 段触发存储。首先&#xff0c;给出数据触发存储的整体框架及功能模块划分。然后&#xff0c;简介 MIG 用户接口、设置及读写时序。最后&#xff0c;进行数据跨时钟域模块设计&#xff0c;内存…...

对 Iterator, Generator 的理解?

Iterator Iterator是最简单最好理解的。 简单的说&#xff0c;我们常用的 for of 循环&#xff0c;都是通过调用被循环对象的一个特殊函数 Iterator 来实现的&#xff0c;但是以前这个函数是隐藏的我们无法访问&#xff0c; 从 Symbol 引入之后&#xff0c;我们就可以通过 Sy…...

C++基础

文章目录 C命名空间定义命名空间using指令不连续的命名空间嵌套的命名空间 面向对象类类成员的访问权限及类的封装对象类成员函数类访问修饰符构造函数和析构函数类的构造函数带参数的构造函数使用初始化列表来初始化字段类的析构函数拷贝构造函数 友元函数内联函数this指针指向…...

软件测试全流程

软件测试全流程 一、制定测试策略二、制定测试方案三、编辑测试用例四、执行测试用例五、输出问题单六、回归测试七、测试文件归档 一、制定测试策略 1、测试目的测试范围 2、用什么测试方法工具&#xff08;例如功能测试用黑盒测试&#xff09; 3、测试优先级&#xff08;功能…...

【软件测试】支付模块测试攻略,这些测试方法和注意事项你掌握了么?

对于大部分人而言&#xff0c;支付模块或许是日常生活中最为关注和使用的功能之一&#xff0c;因此&#xff0c;对于支付模块的质量控制也显得尤为重要。 但考虑到支付涉及到金钱流转等敏感信息&#xff0c;一旦出现问题可能带来非常严重后果。因此&#xff0c;在支付模块测试…...

刷完这个笔记,17K不能再少了....

大家好&#xff0c;最近有不少小伙伴在后台留言&#xff0c;得准备面试了&#xff0c;又不知道从何下手&#xff01;为了帮大家节约时间&#xff0c;特意准备了一份面试相关的资料&#xff0c;内容非常的全面&#xff0c;真的可以好好补一补&#xff0c;希望大家在都能拿到理想…...

知识变现创业指南-《知识变现秘籍》

《知识变现秘籍》 知识变现创业者指南 读完将改变你的认知 开阔你的知识变现思路 系统掌握知识变现的要点 知识付费创业方法 帮你利用知识赚到你弟一桶金 如果你有一技之长&#xff0c;想变现 如果你有一身才华&#xff0c;想变现 如果你在某个领域有绝活 如果你是&am…...

springboot+java博物馆文物管理系统

用户前台进入系统可以进行首页、文物信息、论坛交流、文物资讯、留言反馈、我的、跳转到后台等springboot是基于spring的快速开发框架, 相比于原生的spring而言, 它通过大量的java config来避免了大量的xml文件, 只需要简单的生成器便能生成一个可以运行的javaweb项目, 是目前最…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...