文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 12:42

关注

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

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

好巧不巧,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.    countdouble, 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.   } 

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.   } 

类型提示

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

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

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

代码分割

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

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

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

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

 

来源:自然醒的笔记本内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯