Pinia 使用 对比 Vuex

大纲链接 §

[toc]

1. 理解和使用Vuex 用过吗 ⇧

• 1.专为Vue开发的 状态管理工具（库）
• 2.有六个核心概念（分别有以下作用）
  • store 是 整个容器，包含以下所有内容
  • State 用来 读取状态
    • 附有一个mapState辅助函数，在options选项中使用
  • Getter 用来读取 派生状态（计算状态）
    • 附有一个mapGetters辅助函数，在options选项中使用
  • Mutation 用来 同步提交 状态变更（写）
    • 附有一个mapMutations辅助函数，在options选项中使用
  • Action 用于 异步 变更状态，但它提交的是mutation，而不是直接变更状态
    • 附有一个mapActions辅助函数，在options选项中使用
  • Module 用来给store划分模块，方便维护

追问：Mutation和Action都是提交变更，为什么要分开，有什么区别？

• 同步 异步
• 为了让代码更易于维护
• Pinia 为了让代码更简洁，减少一个概念，容易理解

简单说一说你对Vuex理解？ ⇧

思路分析

1. 给定义
2. 必要性阐述
3. 使用场景
4. 拓展:实践项目

回答

1. Vuex专为Vue.js应用开发的 状态管理模式 + 库

• 使用 集中式全局 存储，管理应用的所有组件的状态，保证状态已一种可预测的状态来变更

2. 维护的应用状态较简单时，可用 单向数据流 来管理

• 即 状态 -> 视图 -> 操作 的单向循环方式，来实现组件间的状态管理
• 应用遇到多个组件 共享状态时，无法维持 定向数据流的简洁
• 如：多个视图依赖统一状态，或者来自不同视图的操作，需要变更同一个状态
• 有必要把组件共享的状态 抽取出来，以一个 全局单例模式 管理
• 通过定义和隔离状态管理中的各种概念，维持视图和状态间的独立性
• 使得代码更加 结构化，更易维护

3. Vuex应用于大型单页应用，简单应用反而是繁琐的，一个简单的 store 模式 或者Vue3中的reactive即可
4. Vuex的引入概念：state、mutation、action等

• Modules 子模块 非常难用
  • 子模块的命名空间的使用方式不一致，有些需要.出子模块，有些不需要（全局）
  • 对TS支持不好，需要自己写复杂的初始类型

追问1：Vuex缺点，开发过程中遇到的问题

• Modules 子模块

追问2：action和mutation的区别？问什么要区分？

• Pinia中就合并了这两个概念

参考

• 【Vue面试专题】前端杨村长 21-对Vuex的理解

vuex的module 使用场景 ⇧

• 上规模的项目都需要拆分Vuex模块便于维护
• 避免状态store对象过于臃肿，可以将store分割成模块module
• 每个模块module拥有自己的state、mutation、action、getter、嵌套子模块module
• 在store对象中设置modules选项
  • module的状态：store.state.moduleA
  • 全局命名空间
    • getters：store.getters.yyy
    • 同时触发子模块中的同名mutation：store.commit('zzz')
    • 同时触发子模块中的同名action：store.dispatch('xyz')

思路分析

1. 概念和必要性
2. 如何拆分
3. 使用细节
4. 优缺点

回答

1. 使用模块Module方式可以将state状态拆分，便于维护规模较大的项目
2. 可以按store的规则单独编写子模块代码各个选项，然后在主文件中通过modules选项组织起来
3. 在使用时，需要注意

• 访问子模块状态时需要加上注册时的模块名：store.state.a.xxx
• 子模块未设置namespace选项时，子模块中的getters、mutations和actions在全局空间中直接访问
• 子模块设置namespace选项，访问子模块中的各选项时，就需要加上命名空间的前缀，子模块的选项就被隔离在自己单独的命名空间中

4. 优点：模块的方式可以拆分代码
5. 缺点：

• 额外添加了module选项，较Composition API使用更繁琐，命名长
• TS类型系统支持差，需要自己实现modules的类型

6. 解决方案：使用pinia，对TS支持好，使用组合的方式，代替模块modules实现代码逻辑的拆分

参考

• 【Vue面试专题】前端杨村长 27-使用Vuex模块
• 【Vue面试专题】前端杨村长 27-使过vuex 的module
• Vuex Module

安装pinia ⇧

安装

导入

使用

代替安装vuex ⇧

安装

导入

使用

参考文章 ⇧

• 无

相关文章 ⇧

状态管理工具 Pinia V.S. Vuex

• Pinia 作弊表（Vue 3 版）
• Pinia初体验
• Pinia 的学习路程
• 上手 Vue 新的状态管理 Pinia，一篇文章就够了
• 看完这篇Pinia上手指南，你还会选择Vuex吗？
• Pinia, an Alternative Vue.js Store
• Vuex中四个map方法的使用
• Pinia进阶：优雅的setup（函数式）写法+封装到你的企业项目
• Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】

• 作者： Joel
• 文章链接：
• 版权声明
• 非自由转载-非商用-非衍生-保持署名