vue2和vue3中vuex的区别和使用方法详解？

前言：

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 中的状态和方法：

<template>
    <div>
        <p>Count: {{ $store.state.count }}</p>
        <button @click="$store.commit('increment')">Increment</button>
        <button @click="incrementAsync">Increment Async</button>
        <p>Double Count: {{ doubleCount }}
        </p>
    </div>
</template>

<script>
exportdefault {
  computed: {
    doubleCount() {
      returnthis.$store.getters.doubleCount
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

其中，$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 的状态和方法：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const count = computed(() => store.state.count)

    const increment = () => store.commit('increment')

    const incrementAsync = () => store.dispatch('incrementAsync')

    const doubleCount = computed(() => store.getters.doubleCount)

    return {
      count,
      increment,
      incrementAsync,
      doubleCount
    }
  }
}
</script>

总结：

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