【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()
      }
    }
  }
})
相关推荐
庸俗今天不摸鱼1 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下8 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox19 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞22 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行22 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581023 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周26 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队44 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯