全新的 Vue3 状态管理工具:Pinia

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。


Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中,为此官方提出了一个 Vuex 5 的全新提案。

5acffb692717b025516220643d4fe65b.png
  • 支持两种语法创建 Store:Options ApiComposition Api

  • 删除 mutations,只支持 stategettersactions

  • 模块化的设计,能很好支持代码分割;

  • 没有嵌套的模块,只有 Store 的概念;

  • 完整的 TypeScript 支持;

在这个提案下方,有个评论很有意思。简单翻译一下:

d6e4a6683336132e51f5acbdd1f32c68.png

好巧不巧,Vuex5 的提案,与 Pinia 实现的功能不能说毫无关系,只能说一模一样,今天的文章就来给大家介绍一下这个菠萝。

安装

在现有项目中,用过如下命令进行 Pinia 模块的安装。

# yarn
yarn add pinia@next
# npm
npm i pinia@next

安装完成后,需要在 Vue3 项目的入口文件中,进行导入安装。

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')

上手

要使用 Pinia 的话,只需要定义一个 store,然后在用到该数据的地方进行导入。

定义 Store

import { defineStore } from "pinia"// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore({// 每个 store 的 id 必须唯一id: 'counter',// state 表示数据源state: () => ({count: 0}),// getters 类似于 computed,可对 state 的值进行二次计算getters: {double () {// getter 中的 this 指向👉 statereturn this.count * 2},// 如果使用箭头函数会导致 this 指向有问题// 可以在函数的第一个参数中拿到 statedouble: (state) => {return state.count * 2}},// actions 用来修改 stateactions: {increment() {// action 中的 this 指向👉 statethis.count++},}
})export default useCounterStore

除了使用上述类似 vuex 的方式来构建 state,还可以使用 function 的形式来创建 store,有点类似于 Vue3 中的 setup()

import { ref, computed } from "vue"
import { defineStore } from "pinia"// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {const count = ref(0)const double = computed(() => count.value * 2)function increment() {count.value++}return {count, double, increment}
})export default useCounterStore

使用 Store

前面也介绍过,Pinia 提供了两种方式来使用 store,Options ApiComposition Api 中都完美支持。

Options Api

Options Api 中,可直接使用官方提供的 mapActionsmapState 方法,导出 store 中的 state、getter、action,其用法与 Vuex 基本一致,很容易上手。

import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'export default {name: 'HelloWorld',computed: {...mapState(useCounterStore, ['count', 'double'])},methods: {...mapActions(useCounterStore, ['increment'])}
}

Composition Api

Composition Api 中,不管是 state 还是 getter 都需要通过 computed 方法来监听变化,这和 Options Api 中,需要放到 computed 对象中的道理一样。另外, Options Api  中拿到的 state 值是可以直接进行修改操作的,当然还是建议写一个 action 来操作 state 值,方便后期维护。

// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {name: 'HelloWorld',setup() {const counter = useCounterStore()return {// state 和 getter 都需要在使用 computed,这和 Options Api 一样count: computed(() => counter.count),double: computed(() => counter.double),increment: () => { counter.count++ }, // 可以直接修改 state 的值increment: counter.increment, // 可以引用 store 中定义的 action}}
}

类型提示

在 Vuex 中,TypeScript 的类型提示做得不是很好,在进行类型推导时,只能找到它的 state。特别是写代码的过程中,代码提示就很不智能。

0a6f2d374f075f4b8819f8a9581d054a.png

而 pinia,就能推导出定义的所有 state、getter、action,这样在写代码的时候,就会方便很多。

1bd0de09bbd092b04e951b2d88867b23.png988c7b6128257f139afcaf70f3a83664.png

主要是 pinia 通过 TypeScript 进行了十分友好的类型定义,感兴趣的可以看看 pinia 的类型定义文件(pinia.d.ts):

cefbc35033cea58fc9f21b5ae6199999.png

代码分割

由于使用了模块化设计,所有的 store 都能够单独引入,而不是像 vuex 一样,通过 modules 的方式,将所有的 module 挂载到一个 store 上。

假设,我们当前通过 Vuex 创建了一个 Store,这个 Store 下有两个 module,分别是用户模块(User)和商品模块(Goods)。即使当前首页只使用到了用户信息,但是整个 Store 都会被打包到首页的 js chunk 中。

3995d8a73992542840fd9dd97569517e.pngd95ad7e944f9749b72346724c6e0781c.png

如果我们使用 pinia,我们会使用 defineStore 定义两个 完全是分离状态的 store,两个页面在引入时,也互不影响。最后打包的时候,首页的 js chunk 和商品页的 js chunk 会分别打包对应的 store。

ebf8e1b10992786e626fe239859c29eb.png

Pinia 的介绍到这里就告一段落了,如果现在有新项目要使用 Vue3 进行开发,推荐无脑使用 Pinia,更加简洁,而且大小仅 1KB。

- END -

61c78928b666ba5b8c3e8bcb1a9b1a6a.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助3000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

d8fccdd8b8195b459b70aba180abf411.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

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

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

相关文章

都快 2022 年了,这些 Github 使用技巧你都会了吗?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。最近经常有小伙伴问我如…

Repeater\DataList\GridView实现分页,数据编辑与删除

一、实现效果 1、GridView 2、DataList 3、Repeater 二、代码 1、可以去Csdn资源下载,包含了Norwind中文示例数据库噢!(放心下,不要资源分) 下载地址:数据控件示例源码Norwind中文数据库 2、我的开发环境&a…

网站快速成型_我的老板对快速成型有什么期望?

网站快速成型Some of the top excuses I have gotten from clients when inviting them into a prototyping session are: “I am not a designer!” “I can’t draw!” “I have no creative background!”在邀请客户参加原型制作会议时,我从客户那里得到的一些主…

EXT.NET复杂布局(四)——系统首页设计(上)

很久没有发帖了,很是惭愧,因此给各位使用EXT.NET的朋友献上一份礼物。 本篇主要讲述页面设计与效果,下篇将讲述编码并提供源码下载。 系统首页设计往往是个难点,因为往往要考虑以下因素: 重要通知系统功能菜单快捷操作…

figma设计_在Figma中使用隔片移交设计

figma设计I was quite surprised by how much the design community resonated with the concept of spacers since I published my 自从我发表论文以来,设计界对间隔件的概念产生了多少共鸣,我感到非常惊讶。 last story. It encouraged me to think m…

axios源码中的10多个工具函数,值得一学~

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文来自读者Ethan01投稿…

寄充气娃娃怎么寄_我如何在5小时内寄出新设计作品集

寄充气娃娃怎么寄Over the Easter break, I challenged myself to set aside an evening rethinking the structure, content and design of my portfolio in Notion with a focus on its 在复活节假期,我挑战自己,把一个晚上放在一边,重新思…

最全 JavaScript Array 方法 详解

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。我们在日常开发中&#…

管理沟通中移情的应用_移情在设计中的重要性

管理沟通中移情的应用One of the most important aspects of any great design is the empathetic understanding of and connection to the user. If a design is ‘selfish’, as in when a product designed with the designer in mind and not the user, it will ultimatel…

网易前端进阶特训营,邀你免费入营!一举解决面试晋升难题!

网易等大厂的前端岗位一直紧缺,特别是资深级。最近一位小哥面进网易,定级P4(资深),总包60W,给大家带来真实面经要点分享。网易的要求有:1.对性能优化有较好理解,熟悉常用调试工具2.熟…

angelica类似_亲爱的当归(Angelica)是第一个让我哭泣的VR体验

angelica类似It was a night just like any other night. I finished work for the day and closed my laptop. I had dinner and after an hour, I put on my Oculus Quest headset in order to begin my VR workout.就像其他任何夜晚一样, 这 是一个夜晚。 我完成…

面试官:请手写一个带取消功能的延迟函数,axios 取消功能的原理是什么

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 https://githu…

facebook 面试_如何为您的Facebook产品设计面试做准备

facebook 面试重点 (Top highlight)Last month, I joined Facebook to work on Instagram DMs and as a way to pay it forward, I 上个月,我加入了Facebook,从事Instagram DM的工作,作为一种支付方式,我 offered to help anyone…

8年了,开始写点东西了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。今天分享一位大佬的文章…

荒径 弗罗斯特_弗罗斯特庞克,颠覆性城市建设者

荒径 弗罗斯特Most gamers are familiar with Will Wright’s famous SimCity series. It created the city building genre and there have been many attempts over the years to ape it. But few developers have been bold enough to completely deconstruct the formula; …

Gitee 如何自动部署博客 Pages?推荐用这个GitHub Actions!

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。前段时间我把自己的博客…

现在流行的画原型图工具_原型资源图:8种流行原型工具的综合指南

现在流行的画原型图工具Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 popular UX prototyping …

持续5个月,200+笔记,3千多人参与,邀请你来学源码~

注意:本文点击文末阅读原文可查看文中所有链接。我正在参加掘金年度人气作者投票活动,大家有空可以加微信群帮忙投票,感谢大家!想起今天还没发文,就开放下微信群二维码,大家扫码进群读源码和帮忙投票吧。群…

第2年,倒数第3天,1.5万票,感动!

1源码共读大家好,我是若川。众所周知。从8月份开始,我组织了源码共读活动,至今已经有5个月了,每周一期,进行到了第18期。每周坚持写源码解读文章,每天坚持答疑解惑,帮助了很多人学会看源码&…

启发式搜索给神经网络_神经科学如何支持UX启发式

启发式搜索给神经网络重点 (Top highlight)Interaction and UX designers have long known and used heuristics to guide the creation of a user-friendly interface. We know empirically that these principles work, and they make “common sense”. These heuristics th…