Vue中的状态管理器Vuex被Pinia所替代-上手使用指南

Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇

Pinia.js 有如下特点:

  • 完整的 typescript 的支持;
  • 足够轻量,压缩后的体积只有1.6kb;
  • 去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点);
  • actions 支持同步和异步;
  • 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割;
  • 无需手动添加 store,store 一旦创建便会自动添加;

安装

npm install pinia --save

创建 Store

新建 src/store 目录并在其下面创建 index.ts,导出 store

// src/store/index.tsimport { createPinia } from 'pinia'const store = createPinia()export default store

 main.ts 中引入并使用

// src/main.tsimport { createApp } from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)
app.use(store)

State

定义State

在 src/store 下面创建一个user.ts

//src/store/user.tsimport { defineStore } from 'pinia'export const useUserStore = defineStore({id: 'user', // id必填,且需要唯一state: () => {return {name: '张三'}}
})

获取 state

<template><div>{{ userStore.name }}</div>
</template><script lang="ts" setup>
import { useUserStore } from '@/store/user'const userStore = useUserStore()
</script>

也可以结合 computed 获取。

const name = computed(() => userStore.name)

state 也可以使用解构,但使用解构会使其失去响应式,这时候可以用 pinia 的 storeToRefs

import { storeToRefs } from 'pinia'
const { name } = storeToRefs(userStore)

修改 state

可以像下面这样直接修改 state

userStore.name = '李四'

但一般不建议这么做,建议通过 actions 去修改 state,action 里可以直接通过 this 访问。

export const useUserStore = defineStore({id: 'user',state: () => {return {name: '张三'}},actions: {updateName(name) {this.name = name}}
})
<script lang="ts" setup>
import { useUserStore } from '@/store/user'const userStore = useUserStore()
userStore.updateName('李四')
</script>

Getters

export const useUserStore = defineStore({id: 'user',state: () => {return {name: '张三'}},getters: {fullName: (state) => {return state.name + '丰'}}
})
userStore.fullName // 张三丰

Actions

异步 action

action 可以像写一个简单的函数一样支持 async/await 的语法,让你愉快的应付异步处理的场景。

export const useUserStore = defineStore({id: 'user',actions: {async login(account, pwd) {const { data } = await api.login(account, pwd)return data}}
})

action 间相互调用

action 间的相互调用,直接用 this 访问即可。

 export const useUserStore = defineStore({id: 'user',actions: {async login(account, pwd) {const { data } = await api.login(account, pwd)this.setData(data) // 调用另一个 action 的方法return data},setData(data) {console.log(data)}}
})

在 action 里调用其他 store 里的 action 也比较简单,引入对应的 store 后即可访问其内部的方法了。

// src/store/user.tsimport { useAppStore } from './app'
export const useUserStore = defineStore({id: 'user',actions: {async login(account, pwd) {const { data } = await api.login(account, pwd)const appStore = useAppStore()appStore.setData(data) // 调用 app store 里的 action 方法return data}}
})
// src/store/app.tsexport const useAppStore = defineStore({id: 'app',actions: {setData(data) {console.log(data)}}
})

数据持久化

插件 pinia-plugin-persist 可以辅助实现数据持久化功能。

安装

npm i pinia-plugin-persist --save

使用

// src/store/index.tsimport { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()
store.use(piniaPluginPersist)export default store

接着在对应的 store 里开启 persist 即可。

export const useUserStore = defineStore({id: 'user',state: () => {return {name: '张三'}},// 开启数据缓存persist: {enabled: true}
})

数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。

自定义 key

你也可以在 strategies 里自定义 key 值,并将存放位置由 sessionStorage 改为 localStorage。

persist: {enabled: true,strategies: [{key: 'my_user',storage: localStorage,}]
}
复制代码

持久化部分 state

默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。

state: () => {return {name: '张三',age: 18,gender: '男'}  
},persist: {enabled: true,strategies: [{storage: localStorage,paths: ['name', 'age']}]
}

上面我们只持久化 name 和 age,并将其改为localStorage, 而 gender 不会被持久化,如果其状态发送更改,页面刷新时将会丢失,重新回到初始状态,而 name 和 age 则不会。

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

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

相关文章

向量数据库学习笔记(1) —— 基础概念

一、 嵌入模型 Embedding Models 嵌入模型是将复杂数据&#xff08;如文本、图像、音频等&#xff09;转换为向量表示的机器学习模型 1. 核心概念 嵌入(Embedding)&#xff1a;将高维、非结构化的数据映射到低维、稠密的向量空间 向量表示&#xff1a;输出固定长度的数值向量…

[NO-WX179]基于springboot+微信小程序的在线选课系统

[NO-WX179]基于springboot微信小程序的在线选课系统 1、管理员角色&#xff08;web端&#xff09;&#xff1a;2、教师角色&#xff08;web端&#xff09;&#xff1a;3、用户角色&#xff08;小程序或web端&#xff09;&#xff1a;4、部分运行截图管理端--教师管理管理端--学…

2025年渗透测试面试题总结-某 长亭(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 长亭 一、Spring SpEL表达式注入漏洞 1. 技术原理 2. 利用条件 3. 攻击方法 4. 防御策略 二、Jav…

conda环境下解决gitk乱码模糊

关键词 conda、git、gitk、git gui、模糊、linux、乱码 现象 操作系统&#xff1a;ubuntu24.04 conda版本&#xff1a;25.1.1 正常的终端里gitk显示不会模糊 但是在conda创建的python虚拟环境中使用gitk&#xff0c;字体开始变得模糊不清 分析 根据deepseek的原因原因分析…

【C++项目实战】:基于正倒排索引的Boost搜索引擎(1)

1. 项目的相关背景与目标 针对boost网站没有搜索导航功能&#xff0c;为boost网站文档的查找提供搜索功能 站内搜索&#xff1a;搜索的数据更垂直&#xff0c;数据量小 类似于cplusplus.com的搜索 2.搜索引擎的相关宏观原理 3.技术栈和项目环境 技术栈&#xff1a;C/C&am…

汽车高级驾驶辅助系统应用存储MRAM

高级驾驶辅助系统和先进的互连航空电子技术等应用要求元件能够承受恶劣的环境条件&#xff0c;并具有较高的耐用性。闪存虽然在某些条件下性能可靠&#xff0c;但在耐用性方面存在局限性&#xff0c;因此无法满足这些严格的要求。 在实时传感器数据处理或高可靠性通信等对时间…

蓝桥-班级活动

问题描述 小明的老师准备组织一次班级活动。班上一共有 n 名 (n 为偶数) 同学&#xff0c;老师想把所有的同学进行分组&#xff0c;每两名同学一组。为了公平&#xff0c;老师给每名同学随机分配了一个 n 以内的正整数作为 id&#xff0c;第 i 名同学的 id 为 ai​。 老师希望…

MongoDB 的索引是提高查询性能的核心机制,类似于传统关系型数据库的索引。以下是对 MongoDB 索引的详细说明:

MongoDB 的索引是提高查询性能的核心机制&#xff0c;类似于传统关系型数据库的索引。以下是对 MongoDB 索引的详细说明&#xff1a; 一、索引基础 1. 索引的作用 加速查询&#xff1a;通过索引快速定位数据&#xff0c;避免全集合扫描&#xff08;COLLSCAN&#xff09;。 排…

深入理解指针(1)(C语言版)

文章目录 前言一、内存和地址1.1 内存1.2 究竟该如何理解编址 二、指针变量和地址2.1 取地址操作符&2.2 指针变量和解引用操作符*2.2.1 指针变量2.2.2 如何拆解指针类型2.2.3 解引用操作符 2.3 指针变量的大小 三、指针变量类型的意义3.1 指针的解引用3.2 指针-整数3.3 voi…

【视频】m3u8相关操作

【视频】郭老二博文之:图像视频汇总 1、视频文件转m3u8 1.1 常用命令 1)默认只保留 5 个ts文件 ffmpeg -i input.mp4 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls stream1.m3u82)去掉音频 -an,保留全部ts文件 ffmpeg -i input.mp4 -vf scale=640:480 -an -…

AWS CloudWatch 实战:构建智能监控与自动化运维体系

摘要&#xff1a;本文通过实际案例&#xff0c;详细讲解如何利用AWS CloudWatch实现云端资源的实时监控、日志分析与自动化运维&#xff0c;助力企业提升系统稳定性与运维效率 一、场景痛点分析 某电商平台迁移至AWS后面临三大挑战&#xff1a; 故障响应滞后&#xff1a;服务器…

第一天学爬虫

阅读提示&#xff1a;我今天才开始尝试爬虫&#xff0c;写的不好请见谅。 一、准备工具 requests库&#xff1a;发送HTTP请求并获取网页内容。BeautifulSoup库&#xff1a;解析HTML页面并提取数据。pandas库&#xff1a;保存抓取到的数据到CSV文件中。 二、爬取步骤 发送请求…

网络编程和计算机网络五层模型的关系

计算机网络的五层模型&#xff08;应用层、传输层、网络层、链路层和物理层&#xff09;为网络编程提供了基础框架和通信机制。网络编程就是在这些层次上实现应用程序之间的通信。 计算机网络五层模型 &#xff08;1&#xff09;应用层&#xff1a; 作用&#xff1a;应用层是…

知识篇 | Oracle的 TEMP表空间管理和优化

Oracle临时表空间&#xff08;TEMP&#xff09;是数据库中用于存储会话级临时数据的核心组件&#xff0c;主要用于支持需要中间结果集的操作&#xff08;如排序、哈希连接&#xff09;。其数据在事务结束或会话终止后自动释放&#xff0c;不持久化存储。 核心特点&#xff1a;…

重学Java基础篇—线程池参数优化指南

一、核心参数解析 线程池&#xff08;ThreadPoolExecutor&#xff09;的性能取决于以下关键参数&#xff1a; 参数说明corePoolSize核心线程数&#xff0c;即使空闲也不会被回收maximumPoolSize最大线程数&#xff0c;当队列满且核心线程忙时创建新线程workQueue任务队列&…

记一次线上环境JAR冲突导致程序报错org.springframework.web.util.NestedServletException

一、问题描述 有个文件导入功能&#xff0c;用到了Hutool 的加密解密功能&#xff0c;本地运行完全可以&#xff0c;但是线上报错&#xff1a;“org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is java.lang.NoClassDefFou…

怎么快速部署Sock5代理到ubuntu云服务器

使用 Dante (推荐) 1. 安装 Dante bash Copy sudo apt update sudo apt install dante-server -y 2. 配置 Dante 编辑配置文件 /etc/danted.conf&#xff1a; bash Copy sudo nano /etc/danted.conf 替换为以下内容&#xff08;按需修改端口和认证&#xff09;&#…

华为OD机试2025A卷 - 游戏分组/王者荣耀(Java Python JS C++ C )

最新华为OD机试 真题目录:点击查看目录 华为OD面试真题精选:点击立即查看 题目描述 2020年题: 英雄联盟是一款十分火热的对战类游戏。每一场对战有10位玩家参与,分为两组,每组5人。每位玩家都有一个战斗力,代表着这位玩家的厉害程度。为了对战尽可能精彩,我们需要…

OpenRAND可重复的随机数生成库

OpenRAND 是一个 C++ 库,旨在通过提供强大且可复制的随机数生成解决方案来促进可重复的科学研究。它是一个简单的仅头文件库,性能可移植,统计稳健,并且易于集成到任何 HPC 计算项目中。 特征 跨平台支持:OpenRAND 旨在跨各种平台无缝工作,包括 CPU 和 GPU。其仅标题库设计…

接口/UI自动化面试题

一、UI自动化 1.1、接口和UI自动化有多少用例&#xff1f; 回答策略&#xff1a;根据接口设定用例&#xff0c;100个接口&#xff0c;自动化case在1500-2000左右。结合自身的项目&#xff0c;回答覆盖的主功能流程。 示例&#xff1a; 接口自动化的测试case一般需要根据接口数…