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

文章目录

• • 1，Vuex
  • 2，Pinia
  • 3，计数器应用
  • • 3.1，使用 Vuex
    • 3.2，使用 Pinia
  • 4，结论

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

1，Vuex

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

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

Vuex 的优点：

1. 集中式管理：所有状态集中在一个地方，易于管理和调试。

2. 时间旅行调试：通过 Vue DevTools，可以回溯和重播状态变化。

3. 插件支持：有许多现成的插件和中间件，如持久化插件、表单插件等。

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

5. 学习曲线：对新手来说，理解和掌握 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 的优点

1. 简洁的 API：相比 Vuex，更少的样板代码，更简洁的语法。

2. 与 Composition API 无缝集成：充分利用 Vue 3 的 Composition API 特性。

3. 模块化：更加自然的模块化支持，不需要像 Vuex 那样繁琐的模块配置。

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

5. 习惯迁移：如果你已经熟悉了 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

1. 安装 Vuex：

 npm install vuex@next

2. 创建 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

3. 在 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

1. 安装 Pinia：

   npm install pinia

1. 创建 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
     }
   })

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>

4，结论

经过对比，我个人更倾向于使用 Pinia，原因如下：

1. 简洁易用：Pinia 的 API 更加简洁，减少了样板代码，提高了开发效率。

2. 与 Composition API 集成更好：Pinia 完美支持 Vue 3 的 Composition API，使得代码更具现代化和可读性。

3. 未来趋势：随着 Vue 3 的普及，Pinia 作为 Vue 3 的推荐状态管理工具，生态系统也在快速成长。

当然，这并不是说 Vuex 不好。Vuex 作为成熟的状态管理工具，有着丰富的插件和中间件支持，尤其是在大型项目中，Vuex 依然是一个非常可靠的选择。

无论你选择 Vuex 还是 Pinia，都需要根据项目的具体需求和团队的技术背景来做出决定。毕竟，最好的工具永远是最适合你项目的那一个。

人生从来没有真正的绝境。只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。