Vux4新特性(Vuex3和Vuex4对比总结)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

简介

前面笔者写了对比Vue2总结Vue3新特性(2022年最全，2.5w字！)一文，里面详细讲述了Vue3的一些新特性，感兴趣的小伙伴可以看看。今天我们继续来说说Vuex4的新特性。

我们都知道在Vue2中配套使用的路由是Vuex@3.x，Vue3中配套使用的路由是Vuex@4.x。

下面我们主要说说Vuex4相较Vuex3几个比较大的改动。也就是我们日常开发所必须要知道的点。

创建

Vuex3使用new Vuex.Store()创建

首先使用new Vuex.Store()创建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++
    }
  }
})

然后在创建Vue实例的时候把store传递进去。

new Vue({
  el: '#app',
  store: store,
})

Vuex4使用createStore()创建

首先使用createStore()创建store实例。

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

然后再创建Vue实例，并将 store 实例作为插件安装。

import { createApp } from 'vue'

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

获取

Vuex3和Vuex4在获取方面有点差别，但是在使用方面并没有差别。

Vuex3使用this.$store获取store

Vuex3使用this.$store来获取store并进行操作。

this.$store.state // 获取state
this.$store.getters // 获取getters
this.$store.commit // 提交mutation
this.$store.dispatch // 提交action

Vuex4使用useStore获取store

Vuex4使用useStore()来获取store并进行操作。

import {useStore} from 'vuex'

const store = useStore()

store.state // 获取state
store.getters // 获取getters
store.commit // 提交mutation
store.dispatch // 提交action

虽然Vuex4推荐使用useStore()来获取store。但是并没有移除this.$store，在<template>和Vue2选项式写法中还是支持使用$store的。

Vuex3和Vuex4都支持使用$store

在模板中使用

<template>
  <div>{{$store.state.count}}</div>
</template>

在选项式写法中使用

export default {
  mounted() {
    console.log(this.$store);
  }
}

辅助函数

在Vuex3中是可以使用辅助函数mapState、mapGetters、 mapMutations、mapActions来简化我们store的操作的。

在Vuex4中并没有删除，还是可以使用，但是只能在Vue2的那种选项式写法中存在，如果想要使用组合式写法setup，是没办法使用的。

Vuex3和Vuex4都支持选项式写法的辅助函数

mapState

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    })
  }
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: {
  ...mapState([
    // 映射 this.count 为 store.state.count
    'count'
  ])
}

mapGetters

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

mapMutations

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

mapActions

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

总结

Vuex4的改动相对来说不是很大，除了创建和获取稍有区别，在使用这块和以前还是一模一样的。但是需要注意辅助函数那一块，它是不能在组合式写法setup中使用的。

系列文章

对比Vue2总结Vue3新特性(2022年最全，2.5w字！)

Vue3路由新特性(Vue-Router3和Vue-Router4对比总结)

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！