前言：

Vue.js 是一款流行的前端框架，它提供了 Vuex 管理应用的全局状态。在 Vue 2 和 Vue 3 中，Vuex 的使用方法有些区别。

一、Vue 2 中的 Vuex

1.安装和配置

在 Vue 2 中，安装 Vuex 可以使用 npm 或 yarn 命令：

bash复制代码npm install vuex --save
# 或者
yarn add vuex

安装完成后需要在 main.js 中进行配置：

import Vuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)

2.创建 Store

创建一个 Vuex store 实例可以使用以下方式：

const store = newVuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}},getters: {doubleCount(state) {return state.count * 2}}
})

Store 是一个对象，包含了应用中所有的状态（state）、修改状态的方法（mutations）、异步操作方法（actions）和计算属性（getters）等内容。

3.在组件中使用

在组件中使用 Vuex 的状态和方法，需要使用 computed 属性或者 methods 属性来获取或触发 Vuex 中的状态和方法：

其中，$store.state.count 获取状态值，$store.commit('increment') 调用 mutation 修改状态，$store.getters.doubleCount 计算属性获取新的状态值，$store.dispatch('incrementAsync') 触发 action 执行异步操作。

二、Vue 3 中的 Vuex

在 Vue 3 中，Vuex 也有了一些改变。

1.安装和配置

在 Vue 3 中，安装 Vuex 也可以使用 npm 或 yarn 命令：

bash复制代码npm install vuex@next --save
# 或者
yarn add vuex@next

安装完成后同样需要在 main.js 中进行配置：

import { createApp } from'vue'importAppfrom'./App.vue'
import store from'./store'createApp(App).use(store).mount('#app')

之后就可以在组件中使用 Vuex 了。

2.创建 Store

在 Vue 3 中，创建一个 Vuex Store 的方式与 Vue 2 相似：

import { createStore } from'vuex'const store = createStore({state() {return {count: 0}},mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}},getters: {doubleCount(state) {return state.count * 2}}
})exportdefault store

3.在组件中使用

在 Vue 3 中，组件中再也不需要使用 this.$store 方法来获取 Vuex 的状态和方法了。而是使用 import { useStore } from 'vuex' 在组件中引入 Vuex 的 store 对象，并通过调用 useStore() 来访问 store 的状态和方法：

总结：

在 Vue 2中，组件中需要使用 $store 方法来获取 Vuex 的状态和方法了。而vue3是使用 import { useStore } from 'vuex' 在组件中引入 Vuex 的 store 对象，并通过调用 useStore() 来访问 store 的状态和方法,通过对比我们可以看出，在 Vue 3 中的使用方式更接近于 React Hooks 的形式，具有更好的可维护性和扩展性。