【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()
      }
    }
  }
})
相关推荐
icebreaker15 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁20 分钟前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊32 分钟前
state和ref
前端·javascript·react.js
GEO_YScsn34 分钟前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing34 分钟前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_38 分钟前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠39 分钟前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner200040 分钟前
Webpack开发:从入门到精通
前端·webpack·node.js
GISer_Jing41 分钟前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin1 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试