Vue 2 vs Vue 3 中 Vuex 使用方式的差异与演变
随着 Vue 3 的发布，Vuex 作为 Vue 的状态管理库，也在新的版本中得到了更新和改进。虽然 Vuex 在 Vue 2 和 Vue 3 中的核心功能和理念基本保持一致，但由于 Vue 3 引入了新的 Composition API（组合式 API），以及一些架构上的改变，Vuex 在 Vue 3 中的使用方式发生了重要变化。本文将对比 Vue 2 和 Vue 3 中 Vuex 的使用方法，帮助大家更好地理解 Vuex 的演变及其在新版本中的应用。
使用vue3开发的同学可以使用pinia简介 | Pinia代替vuex,官方主推的库
一、Vue 2 中的 Vuex 使用
在 Vue 2 中，Vuex 被作为插件使用，通过 Vue.use(Vuex) 将其安装到 Vue 实例中。Vuex 的核心概念包括 State、Mutations、Actions、Getters 和 Modules，这些在 Vue 3 中依然适用。Vue 2 中常见的 Vuex 用法是通过 this.$store 访问 Vuex 的状态、方法和计算属性。以下是一个简单的 Vue 2 + Vuex 的例子：
1. 安装 Vuex
首先，通过 Vue.use(Vuex) 安装 Vuex，然后创建一个 store 实例：
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubleCount: (state) => state.count * 2}
});new Vue({store,render: h => h(App)
}).$mount('#app');
2. 在组件中使用 Vuex
在组件中，我们可以通过 this.$store 访问 Vuex 状态和方法：
<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.commit('increment');},incrementAsync() {this.$store.dispatch('incrementAsync');}}
};
</script>
二、Vue 3 中的 Vuex 使用
Vue 3 中对 Vuex 的使用方式做了一些改进，特别是在与 Composition API 集成时。Vue 3 通过 createApp 来初始化 Vue 实例，并使用 createStore 来创建 Vuex 实例。Vue 3 推崇 Composition API，因此组件中的 Vuex 使用也发生了变化，我们可以通过 useStore() 来替代传统的 this.$store 访问状态和方法。
1. 安装 Vuex
在 Vue 3 中，我们通过 createApp() 创建应用实例，并使用 createStore() 创建 Vuex 实例：
import { createApp } from 'vue';
import { createStore } from 'vuex';const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubleCount: (state) => state.count * 2}
});import App from './App.vue';createApp(App).use(store).mount('#app');
2. 在组件中使用 Vuex
Vue 3 推荐使用 Composition API。在组件中，我们可以通过 useStore() 获取 store 实例，进而访问 Vuex 的状态和方法：
<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button></div>
</template><script>
import { useStore } from 'vuex';export default {setup() {const store = useStore();const increment = () => {store.commit('increment');};const incrementAsync = () => {store.dispatch('incrementAsync');};return {count: store.state.count,increment,incrementAsync};}
};
</script>
三、Vue 2 和 Vue 3 中 Vuex 使用的主要差异
1. Vue 3 使用 Composition API
Vue 3 引入的 Composition API 改变了我们使用 Vuex 的方式。在 Vue 2 中，我们通常通过 this.$store 来访问 Vuex 的状态和方法，而在 Vue 3 中，推荐通过 useStore() 来访问 Vuex 实例，这避免了使用 this 访问 store，使得逻辑更加清晰和灵活。
2. createApp() 和 createStore()
在 Vue 3 中，Vuex 的使用方式发生了一些变化。Vue 2 中是通过 Vue.use(Vuex) 安装插件，而 Vue 3 中则通过 createApp() 初始化 Vue 实例，并使用 createStore() 创建 Vuex 实例。
3. 状态访问和方法调用
在 Vue 2 中，我们使用 this.$store.state 和 this.$store.commit 来访问状态和调用 mutations，而在 Vue 3 中，使用 useStore() 后，开发者可以直接通过 store.state 和 store.commit 来访问和操作 Vuex 数据。
4. 更强的 TypeScript 支持
Vue 3 对 TypeScript 的支持更加完善，因此 Vuex 4（适用于 Vue 3 的 Vuex 版本）提供了更好的类型推导和类型安全。开发者可以享受到更加便捷的类型检查和自动补全功能，减少了开发中的错误。
5. 辅助函数的使用
在 Vue 2 中，我们经常使用 mapState、mapGetters 等辅助函数将 Vuex 的状态映射到组件的计算属性中。但在 Vue 3 中，由于 Composition API 的引入，推荐直接使用 useStore() 来获取 store 实例，然后手动将状态和 getters 映射到组件中，而不再需要使用这些辅助函数。
四、Vuex 4.x 的改进
Vuex 4 是专门为 Vue 3 设计的版本，除了对 Composition API 的支持外，还加强了 TypeScript 的支持，提升了开发体验。
- 支持 Composition API：Vuex 4 中引入了
useStore()钩子，允许在 Composition API 中方便地访问和操作 Vuex 状态。 - TypeScript 支持：Vuex 4 在 TypeScript 的支持上做了很多优化，提供了更好的类型推导和类型安全。
- Store 模块化：Vuex 的模块化机制没有变化，但与 Vue 3 的 Composition API 更加契合，使得模块管理更加灵活和高效。
五，原理上的变化
1. 响应式系统的不同
Vue 2 中的响应式系统
在 Vue 2 中，Vue 使用了 Object.defineProperty 来实现响应式。每当一个对象的属性被访问或修改时，Vue 会通过 getter 和 setter 来追踪数据变化并通知视图更新。Vuex 在 Vue 2 中利用这个响应式系统，当状态（state）变化时，自动触发视图更新。
Vue 3 中的响应式系统
Vue 3 引入了 Proxy 作为响应式的实现方式。Proxy 提供了更强大、更灵活的 API，能够更好地处理深层次嵌套的数据变化，并且对性能进行了优化。Vue 3 的响应式系统通过 reactive() 和 ref() 等 API 来创建响应式的数据对象，使得整个响应式系统的行为比 Vue 2 更加高效和可控。
这也影响了 Vuex 的实现：在 Vue 3 中，Vuex 的状态（state）内部利用 Proxy 进行数据代理，减少了性能瓶颈，同时提升了对嵌套对象的处理能力。
2. Composition API 的引入
Vue 2 中的 this 和选项式 API
Vue 2 使用的是 选项式 API（Options API），组件内的 data、methods、computed、watch 等是作为选项的对象存在的，this 用于访问组件实例的各种数据和方法。在 Vue 2 中访问 Vuex 状态，通常是通过 this.$store 来访问。
Vue 3 中的 Composition API
Vue 3 引入了 Composition API，它通过 setup() 函数进行逻辑的组织和复用。setup() 函数中不再有 this，因此 Vuex 不再通过 this.$store 来访问。相反，Vue 3 推荐使用 useStore() 这个 Composition API 钩子来访问 Vuex 实例，从而获取和操作状态。
这意味着 Vue 3 中的组件更为简洁和函数化，而 Vuex 则可以更自然地与 Composition API 配合，避免了 Vue 2 中基于 this 的耦合。
3. Vuex 4 和 Vuex 3 的差异
Vue 3 中的 Vuex 被升级为 Vuex 4，这个版本完全适配了 Vue 3 和 Composition API。
- Store 的创建：Vue 2 使用
new Vuex.Store()来创建 Vuex 实例，而在 Vue 3 中，则使用createStore()来创建 Vuex 实例。 - 模块化支持：Vuex 的模块化支持并没有变化，但 Vue 3 和 Composition API 的结合使得模块化的管理更容易进行复用和组织。
- 性能优化和类型推导
Vue 3 引入的 Proxy 响应式系统和 Composition API 为 Vuex 带来了更好的性能，特别是在大规模的状态管理和深度嵌套的状态对象时。Vue 3 的 Vuex 也更好地支持 TypeScript，带来了更强的类型推导和类型安全，减少了类型错误的发生。
5. 组件和状态的解耦
Vue 3 的 Composition API 使得状态管理更加解耦，组件不再需要依赖于组件实例的 this 来访问数据，而是通过 函数式的方式 使用 useStore() 获取 store。这与 Vue 2 中基于选项式 API 和 this 的设计理念相比，变得更加灵活和模块化。
6. Vuex 与其他状态管理模式的集成
Vue 3 在设计上更加灵活，可以更方便地与其他库或状态管理模式（如 Pinia）集成。Pinia 是 Vue 3 的官方推荐状态管理库，它与 Vuex 有相似的设计理念，但更符合 Vue 3 的响应式和 Composition API 的风格。
六、总结
- Vue 2 和 Vue 3 中的 Vuex 使用方法差异：Vue 3 引入了 Composition API，因此推荐使用
useStore()钩子来访问 Vuex 状态，而不是像 Vue 2 中那样使用this.$store。Vue 3 中的 Vuex 使用方式更加简洁、灵活，并且与 TypeScript 的支持更加紧密。 - vue3同学使用pinia是更好的选择
- 状态管理的变化：Vue 3 的 Vuex 使用方式更加符合现代前端开发的趋势，使得状态管理更加模块化、可组合，增强了代码的可维护性和可读性。
- TypeScript 友好：Vuex 4.x 对 TypeScript 提供了更强的支持，让开发者在进行大型项目开发时，能够更加安全地进行状态管理。
对于迁移到 Vue 3 的开发者来说，理解和掌握 Vuex 4.x 的新特性，以及如何与 Composition API 配合使用，将大大提升你的开发效率和代码质量。
