xxxx的个人博客
·
Pinia Store ：前端的 MVVM 解耦
💡
原文中文，约2300字，阅读约需6分钟。
📝
内容提要
Pinia 是 Vue 的状态管理库，通过将数据和逻辑从 .vue 文件中分离，解决了数据、逻辑与视图的耦合问题，实现了关注点分离，提升了代码的可维护性和复用性。
🎯
关键要点
- Pinia 是 Vue 的状态管理库，解决了数据、逻辑与视图的耦合问题。
- 早期 Vue 开发中，数据、逻辑和视图被捆绑在一个文件中，导致代码难以维护。
- 耦合的代码使得在不同页面复用数据和进行单元测试变得困难。
- Pinia 通过关注点分离，将数据定义、计算和更新逻辑从 .vue 文件中分离。
- Store 负责定义数据结构、计算属性和业务动作，而 Component 只负责渲染数据。
- Pinia 类比于 WPF/MVVM 模式，Store 相当于 ViewModel，Component 相当于 View。
- 在项目中，建议在 src 目录下建立独立的 stores 文件夹，按照业务领域划分 Store。
- 定义 Store 时，逻辑与 UI 分离，可以在任何组件中复用，甚至在 Node.js 环境下测试。
- .vue 文件变得简洁，只需调用 Store 中的逻辑，不再关心实现细节。
