Pinia状态管理

简介

文档地址：https://pinia.web3doc.top/

Pinia /piːnjʌ/ 中文名：皮你啊

Pinia 优势

1.Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐

翻译翻译 => 官方背书

2.Vue2 和 Vue3 都能支持

翻译翻译 => 既支持options api 又支持compostions api，维护成本低

3.抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库

翻译翻译 => 少写代码,降低心智负担，再也不用写 mutation

4.不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化

翻译翻译 => 多个state,不需要再使用module，现在可以定义多个store，相互之间调用

5.TypeScript支持

翻译翻译 => 没有使用ts，不好解释

6.代码简单，很好的代码自动分割

翻译翻译 => 可以构建多个store，打包管理会自动拆分模块化的设计，便于拆分状态，能很好支持代码分割；

7.极轻，仅有 1 KB

翻译翻译 => 体积小，不会成为项目的负担

核心概念

State: 用于存放数据，有点儿类似 data 的概念；
Getters: 用于获取数据，有点儿类似 computed 的概念；
Actions: 用于修改数据，有点儿类似 methods 的概念；
Plugins: Pinia 插件。

Pinia与Vuex代码分割机制

举个例子：某项目有3个store「user、job、pay」，另外有2个路由页面「首页、个人中心页」，首页用到job store，个人中心页用到了user store，分别用Pinia和Vuex对其状态管理。

Vuex的代码分割

打包时，vuex会把3个store合并打包，当首页用到Vuex时，这个包会引入到首页一起打包，最后输出1个js chunk。这样的问题是，其实首页只需要其中1个store，但其他2个无关的store也被打包进来，造成资源浪费。

解决方案：

经常在首页优化时，会考虑到这个场景，一般处理方案是去做vuex的按需加载，beforeCreate 的时候，可以去判断当前页面需要加载哪些store,利用这个api可以实现$store.registerModule

详情可参考文章

vuex按需加载，避免首页初始化所有数据

pinia的代码分割

打包时，Pinia会检查引用依赖，当首页用到job store，打包只会把用到的store和页面合并输出1个js chunk，其他2个store不耦合在其中。Pinia能做到这点，是因为它的设计就是store分离的，解决了项目的耦合问题。

基本使用

定义state，getters 和vuex基本一样，具体使用可以去官网学

这里仅仅对比修改数据时，两者的区别

明显pinia 的代码量更少，逻辑更清晰，心智负担更小

// store.js
import { defineStore } from 'pinia'

export const main = defineStore('main', {
  state: () => {
    return {
      configInfo: {}
    }
  },
  getters: {},
  actions: {}
})

import * as piniaStore from '../piniaStore'
piniaStore.main().$patch({
    configInfo: data
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// store.js
import { createStore } from 'vuex'

export const store = createStore({
  state: {
    count: 0
  },
  getters: {},
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {},
  modules: {}
})
export default store

//index.vue
import { useStore } from 'vuex'
const storeVuex = useStore()

storeVuex.commit('increment')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

总结

总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。

Pinia拥有更简洁的语法，扁平化的代码编排，符合Vue3 的 Composition api

▲ 回目录

Pinia状态管理 #

简介 #

Pinia 优势 #

核心概念 #

Pinia与Vuex代码分割机制 #

Vuex的代码分割 #

pinia的代码分割 #

基本使用 #

总结 #