基本概念
Pinia
起始于2019 年11月,其目的是设计一个拥有组合式 API
的 Vue
状态管理库,该库用于 Vue.js
应用程序的状态管理库,它提供一个更加简单和灵活的 API
,同时还保留 Vuex
的主要功能,如状态管理、动作和获取器,它是 Vuex
的轻量级替代品,并充分利用了 Vue 3
的 Composition API
,具体参考手册
Pinia
是 Vue
的专属状态管理库,它允许你跨组件或页面共享状态,可以通过一行简单的 export const state = reactive({})
来共享一个全局状态
对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia
,即使在小型单页应用中,你也可以获得如下功能:
- 测试工具集
- 插件:可通过插件扩展
Pinia
功能 - 为
JS
开发者提供适当的TypeScript
支持以及自动补全功能。 - 支持服务端渲染
Devtools
支持- 追踪
actions
、mutations
的时间线 - 在组件中展示它们所用到的
Store
- 让调试更容易的
Time travel
- 追踪
- 热更新
- 不必重载页面即可修改
Store
- 开发时可保持当前的
State
- 不必重载页面即可修改
Store
是一个保存:状态、业务逻辑 的实体,每个组件都可以读取、写入它,一般来说,我们需要将状态放在一个文件夹中,存放在src/store
文件夹中
Pinia
主要涉及到状态State
、计算属性Getters
和动作Actions
- 状态
State
,可以理解为我们的响应式数据ref
,在使用Vue
中的响应式API
时,类似于data
- 计算属性
Getters
,可以理解为计算属性computed
- 动作
Actions
,可以理解为Vue
中的函数方法methods
state
用于存放具体的数据;action
中可以编写一些业务逻辑;当state
中的数据,需要经过处理后再使用时,可以使用getters
配置