服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - 全新的 Vue3 状态管理工具:Pinia

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

2021-12-16 22:18自然醒的笔记本写文章的自然醒 vue.js

Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API。Vuex5 的提案,与 Pinia 实现的功能不能说毫无关系,只能说一模一样,今天的文章就来给大家介绍一下这个菠萝。

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

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

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

  • 支持两种语法创建 Store:Options Api 和 Composition Api;
  • 删除 mutations,只支持 state、getters、actions;
  • 模块化的设计,能很好支持代码分割;
  • 没有嵌套的模块,只有 Store 的概念;
  • 完整的 TypeScript 支持;

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

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

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

安装

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

  1. # yarn
  2. yarn add pinia@next
  3. # npm
  4. npm i pinia@next

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

  1. // main.js
  2. import { createApp } from 'vue'
  3. import { createPinia } from 'pinia'
  4. import App from './App.vue'
  5.  
  6. // 实例化 Vue
  7. const app = createApp(App)
  8. // 安装 Pinia
  9. app.use(createPinia())
  10. // 挂载在真实 DOM
  11. app.mount('#app')

上手

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

定义 Store

  1. import { defineStore } from "pinia"
  2.  
  3. // 对外部暴露一个 use 方法,该方法会导出我们定义的 state
  4. const useCounterStore = defineStore({
  5. // 每个 store 的 id 必须唯一
  6. id: 'counter',
  7. // state 表示数据源
  8. state: () => ({
  9. count: 0
  10. }),
  11. // getters 类似于 computed,可对 state 的值进行二次计算
  12. getters: {
  13. double () {
  14. // getter 中的 this 指向 state
  15. return this.count * 2
  16. },
  17. // 如果使用箭头函数会导致 this 指向有问题
  18. // 可以在函数的第一个参数中拿到 state
  19. double: (state) => {
  20. return state.count * 2
  21. }
  22. },
  23. // actions 用来修改 state
  24. actions: {
  25. increment() {
  26. // action 中的 this 指向 state
  27. this.count++
  28. },
  29. }
  30. })
  31.  
  32. export default useCounterStore

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

  1. import { ref, computed } from "vue"
  2. import { defineStore } from "pinia"
  3.  
  4. // 对外部暴露一个 use 方法,该方法会导出我们定义的 state
  5. const useCounterStore = defineStore('counter', function () {
  6. const count = ref(0)
  7. const double = computed(() => count.value * 2)
  8. function increment() {
  9. count.value++
  10. }
  11. return {
  12. count, double, increment
  13. }
  14. })
  15.  
  16. export default useCounterStore

使用 Store

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

Options Api

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

  1. import { mapActions, mapState } from 'pinia'
  2. import { useCounterStore } from '../model/counter'
  3.  
  4. export default {
  5. name: 'HelloWorld',
  6. computed: {
  7. ...mapState(useCounterStore, ['count', 'double'])
  8. },
  9. methods: {
  10. ...mapActions(useCounterStore, ['increment'])
  11. }
  12. }

Composition Api

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

  1. // Composition Api
  2. import { computed } from 'vue'
  3. import { useCounterStore } from '../stores/counter'
  4. export default {
  5. name: 'HelloWorld',
  6. setup() {
  7. const counter = useCounterStore()
  8. return {
  9. // state 和 getter 都需要在使用 computed,这和 Options Api 一样
  10. count: computed(() => counter.count),
  11. double: computed(() => counter.double),
  12. increment: () => { counter.count++ }, // 可以直接修改 state 的值
  13. increment: counter.increment, // 可以引用 store 中定义的 action
  14. }
  15. }
  16. }

类型提示

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

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

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

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

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

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

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

代码分割

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

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

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

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

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

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

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

原文链接:https://mp.weixin.qq.com/s/lzjeEMPd_V8OmIe8tnQRuQ

延伸 · 阅读

精彩推荐
  • vue.jsVue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Latteitcjz6432022-02-12
  • vue.jsVue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...

    yukiwu6752022-01-25
  • vue.js用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

    这篇文章主要介绍了用vite搭建vue3应用的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    Asiter7912022-01-22
  • vue.jsVue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    优小U9632022-02-21
  • vue.jsVue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.jsVue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    十里不故梦10222021-12-31
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学,可能js的基础也不是太牢固,听起来更是吃力,那我就已个人之浅见,以大白话...

    CRMEB技术团队7992021-12-22