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

Posted 2023-03-15 尔嵘

前言：

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 的形式，具有更好的可维护性和扩展性。