【Pinia和Vuex区别】

Pinia和Vuex

Pinia和Vuex都是Vue状态管理的库,但是它们在实现方式和使用方法上有所不同。

1. 实现方式

  • Vuex采用了全局单例模式,通过一个store对象来管理所有的状态,组件通过store对象来获取和修改状态。

  • Pinia则采用了分离模式,即每个组件都拥有自己的store实例,通过在组件中创建store实例来管理状态。

2. 使用方法

  • Vuex要求在组件中通过mapState、mapGetters等方法来获取状态或者通过dispatch和commit方法来修改状态,需要额外引入mapState等辅助函数。

  • Pinia则直接将状态挂载在组件实例上,通过createStore和useStore方法来创建和使用store实例,更加简洁和容易理解。

3. 源码解析

  • Vuex的源码相对较为复杂,涉及到了响应式系统的实现、状态变更的批处理等。

  • Pinia的源码相对较为简单,主要是通过Vue的provide/inject实现store实例的分发和共享。

以下是Pinia的源码解析

Pinia的核心是Store类,它继承自Vue的reactivereadonly方法,以及PiniaStore接口。PiniaStore接口定义了一些基本的方法,例如getStatesetStatesubscribeoff等,用于状态的读取、更新和订阅。

Store类还使用了createApp方法来创建一个Vue实例,在该实例的setup函数中将pinia实例注入到app的provide中,这样就可以在其他组件中使用useStore()来获取相应的store实例。

Store类还提供了一些常用的方法,例如useActionsuseState,用于在组件中调用store的方法或获取状态。这些方法内部都使用了Vue的injectprovide方法来实现数据的传递。

在整个库中,Store类的源码是最为关键的部分,它使用了Vue 3的响应式系统来实现了状态的管理和更新。同时,它还提供了一些方便的API来处理常见的状态管理需求,例如模块化、订阅等。

示例代码
javascript 复制代码
//Vuex

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

// Pinia

import { createPinia } from 'pinia'
import { defineComponent, ref } from 'vue'

const pinia = createPinia()

// 定义store
pinia.store('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 组件中
export default defineComponent({
  setup() {
    const store = pinia.useStore('counter')
    const count = ref(0)
    return {
      count,
      increment() {
        store.increment()
      }
    }
  }
})
相关推荐
爱吃的强哥10 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信18 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安19 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板24 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩25 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真31 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.2 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端