当前位置: 首页 > 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项目, 是目前最…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...