Vuex 和 Pinia两种状态管理工具，该选择哪一个呢？

最新推荐文章于 2024-08-17 10:40:47 发布

hhzz

最新推荐文章于 2024-08-17 10:40:47 发布

阅读量1.2k

点赞数 13

文章标签： Vue vuex pinia

本文链接：https://blog.csdn.net/weixin_43025151/article/details/140601196

版权

文章目录

当项目逐渐变大时，状态管理的问题开始显现了出来。这时，两个强大的状态管理工具：Vuex 和 Pinia。该选择哪一个呢？

1，Vuex

Vuex 是 Vue.js 的官方状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

它的核心理念是：单一状态树，即一个对象就包含了全部应用层级状态。这个理念使得调试和监控变得简单，因为我们可以轻松追踪状态的变化。

在这里插入图片描述
Vuex 的优点：

集中式管理：所有状态集中在一个地方，易于管理和调试。
时间旅行调试：通过 Vue DevTools，可以回溯和重播状态变化。
插件支持：有许多现成的插件和中间件，如持久化插件、表单插件等。

Vuex 的缺点：
4. 代码冗长：使用 Vuex 通常需要写很多样板代码。

学习曲线：对新手来说，理解和掌握 Vuex 的概念和用法可能需要一些时间。

<!-- store.js -->
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: (state) => state.count
  }
})

export default store

2，Pinia

Pinia 是 Vue 生态系统中的一匹黑马，它是新一代的状态管理库。Pinia 借鉴了 Vuex 的理念，但提供了更简洁和现代的 API。

Pinia 被设计为 Vue 3 的默认状态管理工具，完全支持 Composition API 和 TypeScript。

在这里插入图片描述
Pinia 的优点

简洁的 API：相比 Vuex，更少的样板代码，更简洁的语法。
与 Composition API 无缝集成：充分利用 Vue 3 的 Composition API 特性。
模块化：更加自然的模块化支持，不需要像 Vuex 那样繁琐的模块配置。

Pinia 的缺点
4. 生态系统：相对于 Vuex，Pinia 的插件和中间件支持还在不断完善中。

习惯迁移：如果你已经熟悉了 Vuex，可能需要一些时间来适应 Pinia 的新语法。

<!-- store.js -->
import { defineStore } from 'pinia'

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

3，计数器应用

使用 Pinia 和 Vuex 构建一个计数器应用

3.1，使用 Vuex

安装 Vuex：

 npm install vuex@next

创建 Vuex Store：

<!-- store.js -->
   import { createStore } from 'vuex'

   const store = createStore({
     state() {
       return {
         count: 0
       }
     },
     mutations: {
       increment(state) {
         state.count++
       }
     },
     actions: {
       increment({ commit }) {
         commit('increment')
       }
     },
     getters: {
       count: (state) => state.count
     }
   })

   export default store

在 Vue 组件中使用 Vuex：

   <script setup>
   import { computed } from 'vue'
   import { useStore } from 'vuex'

   const store = useStore()
   const count = computed(() => store.getters.count)

   const increment = () => {
     store.dispatch('increment')
   }
   </script>

   <template>
     <div>
       <p>{{ count }}</p>
       <button @click="increment">Increment</button>
     </div>
   </template>

3.2，使用 Pinia

安装 Pinia：

   npm install pinia

创建 Pinia Store：

  <!-- store.js -->
   import { defineStore } from 'pinia'

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

在 Vue 组件中使用 Pinia：

  <script setup>
   import { computed } from 'vue'
   import { useCounterStore } from './store'

   const counterStore = useCounterStore()
   const count = computed(() => counterStore.count)

   const increment = () => {
     counterStore.increment()
   }
   </script>

   <template>
     <div>
       <p>{{ count }}</p>
       <button @click="increment">Increment</button>
     </div>
   </template>