使用 Pinia 的五个技巧

在这篇文章中,想与大家分享使用 Pinia 的五大技巧。

以下是简要总结:

  1. 不要创建无用的 getter
  2. 在 Option Stores 中使用组合式函数(composables)
  3. 对于复杂的组合式函数,使用 Setup Stores
  4. 使用 Setup Stores 注入全局变量,如路由器(Router)
  5. 如何创建私有状态

1、不要创建无用的 getter

你并不需要为所有事情使用 getter。在 Vuex 中有一个普遍的误解,认为你应该总是通过 getter 访问状态。

这是不正确的。

当你需要从状态中计算出某些东西时,getter 是有用的,例如,如果你有一个待办事项列表,想知道有多少已完成,你可以为此创建一个 getter。

在生产代码中经常看到过这样的代码:

export default Vuex.Store({
  state: () => ({ counter: 0 }),
  getters: {
    // 完全无用的 getter
    getCount: state => state.counter,
  },
})

这在 Vuex 中只是不必要的样板代码,在 Pinia 中也是如此。你可以直接访问状态:

const counterStore = useCounterStore()
counterStore.counter // 0 ✅

PS:大多数时候你不需要 storeToRefs()(或 toRef())。你可以直接使用 store,Vue 的响应式真的很方便 😄。

2、在 Option Stores 中使用组合式函数

你可以在 option stores 中使用一些组合式函数,特别是那些持有状态且可写的组合式函数。例如,你可以使用 @vueuse/core 的 useLocalStorage() 将一些状态存储在浏览器的本地存储中。

import { useLocalStorage } from '@vueuse/core'
const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/user/login', 'alice'),
  }),
})

或者使用 refDebounced() 对 ref 的更改进行防抖处理:

import { refDebounced } from '@vueuse/core'
const useSearchStore = defineStore('search', {
  state: () => ({
    user: {
      text: refDebounced(/* ... */),
    },
  }),
})

3、在 Setup Stores 中使用复杂的组合式函数

在 Setup stores 中,你可以使用任何你想要的组合式函数。你可以连接到 websocket、蓝牙处理或甚至游戏手柄!

import { useWebSocket } from '@vueuse/core'
export const useServerInfoStore = defineStore('server-info', () => {
  const { status, data, send, open, close } = useWebSocket('ws://websocketurl')
  return {
    status,
    data,
    send,
    open,
    close,
  }
})

Pinia 会自动识别哪些是状态、getter 或动作。记住,必须从 setup 函数返回所有状态属性。

在 setup stores 中使用 inject()

你可以在 setup stores 中使用 inject() 来访问应用级别提供的变量,如路由器实例:

import { useRouter } from 'vue-router'
export const useAuthStore('auth', () => {
  const router = useRouter()
  function logout() {
    // 登出用户
    return router.push('/login')
  }
  return {
    logout
  }
})
使用嵌套 Stores 创建私有状态

setup stores 的一个黄金规则是返回每一个状态片段:

export const useAuthStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)
  // 我们必须返回 user 和 token
  return {
    user,
    token,
  }
})

但如果我们想要隐藏一些 store 中的状态怎么办?我们可以创建一个包含私有状态的嵌套 store:

export const usePrivateAuthState('auth-private', () => {
  const token = ref<string | null>(null)
  return {
    token,
  }
})
export const useAuthStore('auth', () => {
  const user = ref<User | null>(null)
  const privateState = usePrivateAuthState()
  privateState.token // 仅在此 store 中可访问
  return {
    user,
  }
})
在 SSR 中使用仅客户端状态

服务器端渲染(SSR)是提高应用性能的绝佳方式。然而,与仅客户端应用相比,它带来了一些额外的困难。例如,你无法访问 window、document 或任何其他特定于浏览器的 API,如本地存储。

在 Option Stores 中,这要求你使用 hydrate 选项告诉 Pinia 某些状态不应在客户端上进行 hydrate:

import { useLocalStorage } from '@vueuse/core'
const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/user/login', 'alice'),
  }),
  hydrate(state, initialState) {
    state.user = useLocalStorage('pinia/user/login', 'alice')
  },
})

在 Setup Stores 中,你可以使用 skipHydrate 辅助函数标记某些状态为仅客户端状态:

import { defineStore, skipHydrate } from 'pinia'
const useAuthStore = defineStore('auth', () => {
  const user = skipHydrate(useLocalStorage('pinia/user/login', 'alice'))
  return { user }
})

总结

当然还有许多其他的技巧可以分享,但这些是我认为比较有用的。此外,大多数人对它们并不了解。你有没有发现任何有用的 Pinia 技巧或窍门?

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SQL零基础入门教程,贼拉详细!贼拉简单! 速通数据库期末考!(十二)

SUM&#xff08;&#xff09;求和函数 SUM() 函数返回数值列的总和。 语法&#xff1a; SELECT SUM(column_name) FROM table_name;column_name:字段名&#xff08;必须是数值字段&#xff09; table_name&#xff1a;表名 示例&#xff1a; 查询每位同学的总分&#xff1a…

2、单片机及开发板介绍

单片机介绍 单片机&#xff0c;英文Micro Controller Unit,简称&#xff1a;MCU 内部集成&#xff1a;CPU、RAM(随机存储器)、ROM&#xff08;只读存储器&#xff09;、定时器、中断系统、通讯接口等 作用&#xff1a;信息采集&#xff08;传感器&#xff09;、处理&#xff0…

[autojs]利用console实现悬浮窗日志输出

"ui"; ui.layout(<vertical><button id"autoFloatWindow" text"开启悬浮窗" textSize"15sp" /><button id"autoService" text"开启无障碍服务" textSize"15sp" /><button id"…

聚水潭连接API,集成无代码开发,优化电商平台运营

聚水潭连接API&#xff0c;实现电商平台的高效运营 聚水潭作为一款SaaS ERP解决方案&#xff0c;通过其出色的产品和服务&#xff0c;迅速在市场上占据了一席之地。而其无代码开发的特点&#xff0c;为电商系统和客服系统的连接与集成提供了便利。聚水潭开放平台的优势在于&am…

[ChatGPT]ChatGPT免费,不用翻墙!?——你需要的装备

系列文章目录 【AIGC】服务于人类&#xff5c;一种新的人工智能技术-CSDN博客 文章目录 目录 系列文章目录 文章目录 前言 一、天意云网站 ​编辑 二、使用步骤 可以看到有云服务器、Rstudio以及我们的ChatGPT&#xff0c;我这次主要分享ChatGPT&#xff0c;其他的有机会我再给…

如何避免Steam搬砖项目中账号被盗

购买steam余额有风险吗&#xff1f;及N种被红锁的情况 相信最近很多人都已经听说过steam游戏搬砖这个项目&#xff0c;也叫CSGO游戏搬砖项目&#xff0c;还有人叫它&#xff1a;国外steam游戏汇率差项目&#xff0c;无论怎么称呼&#xff0c;都是同一个项目。 那么什么是stea…

【SpringMVC】 参数传递

一.项目目录 SpringBoot项目创建之后会生成很多目录 删除不需要的这四个文件/目录 目录 二.Spring MVC 和 MVC Spring MVC(Spring Web MVC) Spring Web MVC 是⼀个 Web 框架 MVC : Model View Controller 它是一种思想 , 它把一个项目分成了三个部分. View视图层 界面显示…

HOOPS Web平台助力开发3D应用,实现超大规模3D web轻量化渲染与数据格式转换!

一、包含的软件开发工具包 HOOPS Web平台帮助开发人员构建基于Web的工程应用程序&#xff0c;提供高级3D Web可视化、准确快速的CAD数据访问和3D数据发布。 HOOPS Web平台包括三个集成软件开发工具包 (SDK)&#xff1a; &#xff08;1&#xff09;Web端3D可视化引擎 HOOPSCom…

labview 安捷伦 34970A 采集温度等

本文详细描述了怎么用安捷伦34970A采集温度&#xff0c;并列出了labview的下载链接&#xff0c;具有一定的参考价值。 1.必要条件&#xff1a; RS-232电缆一根 IO Libraries Suite 软件 BenchLink Data Logger 软件 软件可以在http://www.keysight.com.cn下载 检查RS-232…

Hadoop学习总结(MapReduce的数据去重)

现在假设有两个数据文件 file1.txtfile2.txt2018-3-1 a 2018-3-2 b 2018-3-3 c 2018-3-4 d 2018-3-5 a 2018-3-6 b 2018-3-7 c 2018-3-3 c2018-3-1 b 2018-3-2 a 2018-3-3 b 2018-3-4 d 2018-3-5 a 2018-3-6 c 2018-3-7 d 2018-3-3 c 上述文件 file1.txt 本身包含重复数据&…

本地canal安装和使用

1、组件版本 canal.deployer-1.1.7 kafka_2.13-2.6.0 jdk8 apache-zookeeper-3.6.0-bin mysql5.7 2、解压canal.deployer-1.1.7 2.1、修改canal.properties配置文件 ##改为kafka canal.serverModekafka## 改为instance canal.destinations instance## 改为true&#x…

强化学习------贝尔曼方程

目录 前言基础知识马尔可夫决策过程 (Markov decision process, MDP)回报(Return)折扣回报(Discounted Return) State Value&#xff08;状态价值函数&#xff09;贝尔曼方程的推导贝尔曼方程的矩阵形式Action Value&#xff08;动作价值函数&#xff09;贝尔曼最优公式 前言 …

基于 Modbus 的工业数据采集、控制(part 2)

基本处理流程 服务器 parse_and_process(char * input)//input :post请求发送的正文 {...// 请求 modbus 数据else if(strstr(input, "modbus_get")){return handle_get(sock, input);}// 控制 modbus 设备else if(strstr(input, "modbus_set")){return …

【OpenAI】经营权争夺战关系图

《OpenAI新模型曝重大飞跃&#xff1a;AGI雏形或威胁人类&#xff0c;也成Altman被解雇导火索&#xff01;》摘要如下: [一句话总结] OpenAI的Q*项目取得突破&#xff0c;解决了以前未见过的数学问题&#xff0c;为AI发展带来重要的技术里程碑。 [文章概览要点] OpenAI内部研…

redis运维(十四) hash缓存案例

一 缓存案例 ① 需求 ② 个人理解 策略&#xff1a;不更新缓存&#xff0c;而是删除缓存大部分观点认为&#xff1a;1、做缓存不应该是去更新缓存,而是应该删除缓存2、然后由下个请求去缓存,发现不存在后再读取数据库,写入redis缓存 高并发场景下,到底先更新缓存还是先更…

完美解决RuntimeError: implement_array_function method already has a docstring

文章目录 一、报错原因--numpy版本太低二、更新numpy总结 一、报错原因–numpy版本太低 当收到 "RuntimeError: implement_array_function method already has a docstring" 错误时&#xff0c;这可能是由于在numpy的某个版本中&#xff0c;该方法的文档字符串&…

vue3-生命周期

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue3-生命周期 目录 vue3生命周期 vue3生命周期钩子 1.1 onMounted() 1.2 onUpdated() 1.3 onU…

2024年天津专升本招生计划及其收费标准

2024年天津专升本招生计划及其收费标准 天津农学院 文史类 人力资源管理 20 4400 文史类 物流管理 20 4400 理工类 人力资源管理 10 4400 理工类 物流管理 10 4400 理工类 水文与水资源工程 30 5400 有专业限制 理工类 水产养殖学 20 4400 有专业限制 天津…

ui5使用echart

相关的代码已经发布到github上。 展示下相关的实现功能 1、柱状图-1 2、柱状图-2 3.折线图 4.饼状图 如何使用&#xff1a; 使用git clone项目到本地 git clone https://github.com/linhuang0405/com.joker.Zechart找到index.html。在vscode里右键选择Open with Live Serve…

我的创业之路:3个月的经历与回顾

从金山办公离职到现在已过去差不多3个月的时间&#xff0c;自己开发的产品也逐步稳定&#xff0c;是时候总结和回顾一下这三个月的心路历程了 起点 离职后&#xff0c;我思考过很多个创业项目&#xff0c;最后还是选择了做一款在线打字练习的网站。其主要原因如下&#xff1a…