Skip to content

基本概念

Pinia 起始于2019 年11月,其目的是设计一个拥有组合式 APIVue 状态管理库,该库用于 Vue.js 应用程序的状态管理库,它提供一个更加简单和灵活的 API,同时还保留 Vuex 的主要功能,如状态管理、动作和获取器,它是 Vuex 的轻量级替代品,并充分利用了 Vue 3Composition API具体参考手册

Pinia Vue 的专属状态管理库,它允许你跨组件或页面共享状态,可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态

对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia,即使在小型单页应用中,你也可以获得如下功能:

  • 测试工具集
  • 插件:可通过插件扩展 Pinia 功能
  • JS 开发者提供适当的TypeScript支持以及自动补全功能。
  • 支持服务端渲染
  • Devtools 支持
    • 追踪 actionsmutations 的时间线
    • 在组件中展示它们所用到的 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配置

Released under the MIT License.