Vuex PK PiniaPinia介绍 Pinia的目标是成为一个轻量级的状态管理库提供了完整的TypeScript

Pinia介绍

Pinia的目标是成为一个轻量级的状态管理库提供了完整的TypeScript支持，极其轻巧，体积约1KB。与TypeScript一起使用具有可靠的类型推断支持。此外，Pinia还提供了更简单的API，更少的规范，以及Composition-API风格的API。

核心概念包括：定义Store、State、Getter、Action、插件、组件外的Store

一、定义Store

主要分为两种方式：Option Store、Setup Store

Store通过 defineStore() 定义

Option Store: 写法比较类似于Vue的选项是Api 等同于Vue2

state 是 store 的数据 (data)
getters 是 store 的计算属性
(computed)，而 actions
则是方法 (methods)

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Setup Store: 类似于组件式Api 也就是Vue3

ref() 就是 state 属性
computed() 就是 getters
function() 就是 actions

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  const double = computed(() => {
      return count.value * 2;
   })  
  return { count, increment, double }
})

二、State

State驱动应用的数据源；提供唯一的公共数据源，所有的共享的数据都统一放在state中存储。

三、Getter

完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们，或setOption中的Computed

四、Action

Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义，并且它们也是定义业务逻辑的完美选择。 也就是这里即可以去更改State，也可以去进行一些副作用的方法(发送请求)。

五、插件

由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：

为 store 添加新的属性
定义 store 时增加新的选项
为 store 增加新的方法
包装现有的方法
改变甚至取消 action
实现副作用，如本地存储
仅应用插件于特定 store

插件是通过 pinia.use() 添加到 pinia 实例的。

六、组件外的Store

就是在组件外使用store，比如在Vue Router导航守卫中使用Store。

VueX

Vuex适用于中大型web单页应用中对应用的状态进行管理。如果需要在Vue3中使用VueX的话，VueX的版本必须是4，而VueX4是作为一个过渡的选择，存在很大缺陷，最终还是会向VueX5过渡，所以在Componsition API诞生之，也就设计了全新的状态管理Pinia VueX的核心概念：State、Gettes、Mutations(同步)、Actions(异步)

VueX与Pinia的对比

Vuex： State、Gettes、Mutations(同步)、Actions(异步)

Pinia： State、Gettes、Actions(同步异步都支持)

VueX当前最新版是 4.x

VueX4 用于Vue3
VueX3 用于Vue2

Pinia当前最新版是 2.x

即支持Vue2 也支持 Vue3

Pinia核心特性

Pinia没有Mutations
Actions支持同步和异步
没有模块的嵌套结构
- Pinia通过设计提供扁平结构，每个Store都是互相独立的。更好的代码分割且没有命名空间。也可以通过在一个模块中导入另一个模块来隐式嵌套store，甚至可以拥有store的循环以来关系
更好的TypeScript支持
- 不用创建自定义的复杂包装器来支持TypeScript所有内容都类型化，并且API的涉及方式也尽可能使用TS类型推断
不需要注入、导入函数、调用，享受自动补全，
Vue2、3都支持
- 除了初始安装以及SSR配置外，两者使用上API都相同
支持 Vue DevTools
- 跟踪 actions, mutations 的时间线
- 在使用了模块的组件中就可以观察到模块本身
- 支持 time-travel 更容易调试
- 在 Vue2 中 Pinia 会使用 Vuex 的所有接口，所以它俩不能一起使用
- 但是针对 Vue3 的调试工具支持还不够完美，比如还没有 time-travel 功能
模块热更新
- 无需重新加载页面就可以修改模块
- 热更新的时候会保持任何现有状况