What are the differences between Vuex3 and Vuex4

Vuex is the official state management library for managing application status in applications. Vuex 3 is the version for Vue 2, while Vuex 4 is the version for Vue 3. Here are some important aspects of Vuex 3 and Vuex 4:

How to create a Store

• Vuex 3: Usenew ()Create a store instance

import Vue from 'vue'
import Vuex from 'vuex'
​
(Vuex)
​
const store = new ({
  // Configuration Items})
​
export default store

• Vuex 4: UsecreateStoreFunction creation store instance

import { createStore } from 'vuex'
​
const store = createStore({
  // Configuration Items})
​
export default store

Used in Vuex 4createStoreFunctions to create store instances instead of mounting them directly on Vue instances.

Use Store in Components

• Vuex 3: Usethis.$storeAccess the store instance, throughthis.$Access status, throughthis.$()Submit mutation, throughthis.$()Perform distribution action.

export default {
  computed: {
    count() {
      return this.$
    }
  },
  methods: {
    increment() {
      this.$('increment')
    },
    incrementAsync() {
      this.$('incrementAsync')
    }
  }
}

• Vuex 4: UseuseStoreFunction to get the store instance, throughAccess status, through()Submit mutation, through()Perform distribution action.

import { useStore } from 'vuex'
​
export default {
  setup() {
    const store = useStore()
    const count = computed(() => )
​
    const increment = () => {
      ('increment')
    }
​
    const incrementAsync = () => {
      ('incrementAsync')
    }
​
    return {
      count,
      increment,
      incrementAsync
    }
  }
}

Although Vuex4 is recommended to use a more Composition API-like styleuseStore()Come and get itstoreExample. But it was not removedthis.$store, but in<template>andVue2It is still supported in the option writing method$storeof.

Usage of helper functions

• Vuex 3: UsemapState、mapGetters、mapMutationsandmapActionsHelper functions to map to simplify access to the store in the component.

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
​
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  }
}

• Vuex 4: Using the Composition APIcomputedFunctions and ordinary JavaScript functions implement similar functions.

import { computed, useStore } from 'vuex'
​
export default {
  setup() {
    const store = useStore()
​
    const count = computed(() => )
    const doubleCount = computed(() => )
​
    const increment = () => {
      ('increment')
    }
​
    const incrementAsync = () => {
      ('incrementAsync')
    }
​
    return {
      count,
      doubleCount,
      increment,
      incrementAsync
    }
  }
}

Vuex4 supports auxiliary functions with option writing, which is exactly the same as Vuex3 when used. However, it is necessary to note that auxiliary functions cannot be written in combinationsetupUsed in.

Responsive improvements

• Vuex 3: Use Vue 2's responsive system ( ) to monitor and update status.
• Vuex 4: Use Vue 3's responsive system (proxy) to monitor and update states, and you can use the Composition APIreactiveandcomputedFunctions perform more flexible and efficient state management.

In essence, this is the difference between Vue2 and Vue3, but because Vue2 matches Vuex 3 and Vue3 matches Vuex 4. Strictly speaking, it cannot be considered the difference between Vuex3 and Vuex4.

Vuex4 supports multiple modes

Vuex 3 is singleton mode, that is, the entire application can only have one global Vuex Store instance. And in Vuex 4, you can passuseStoreFunctions create multiple independent instances of Vuex Store in different components, thus supporting multiple-case patterns.

Here is an example showing how to use it in Vuex 4useStoreHelper functions create multiple independent Vuex Store instances:

<template>
  <div>
    <p>Counter 1: {{ counter1 }}</p>
    <p>Counter 2: {{ counter2 }}</p>
    <button @click="incrementCounter1">Increment Counter 1</button>
    <button @click="incrementCounter2">Increment Counter 2</button>
  </div>
</template>
​
<script>
import { useStore } from 'vuex'
​
export default {
  setup() {
    // Create a Vuex Store instance using the useStore helper function    const store1 = useStore('store1')
    const store2 = useStore('store2')
​
    // Get the status of the first store by    const count1 = 
    // Get the status of the second store by    const count2 = 
​
    // Submit mutations to the first Store via ()    const incrementCounter1 = () => {
      ('increment')
    }
​
    // Submit mutations to the second Store via ()    const incrementCounter2 = () => {
      ('increment')
    }
​
    return {
      count1,
      count2,
      incrementCounter1,
      incrementCounter2
    }
  }
}
</script>

The above example shows how to use it in a Vue componentuseStoreHelper functions create multiple independent Vuex Store instances and access and modify their respective states and mutations through these instances. This is an important improvement of Vuex 4 compared to Vuex 3, making Vuex more flexible and scalable in scenarios that support multiple modes.

Reference link:

• Vuex 4 official documentation:/zh/
• Vuex 3 official documentation:/zh/

This is the end of this article about the difference between Vuex3 and Vuex4. For more related contents of Vuex3 and Vuex4, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!