Detailed explanation of the use of state manager Vuex 4 in Vue 3 to achieve global data sharing

Vue 3 is a popular JavaScript framework commonly used for building user interfaces. It can be easily combined with the state manager Vuex for global data sharing. This article will delve into the use of Vuex 4, the new version in Vue 3, to help developers better understand and apply this powerful state management tool.

First, we need to install Vuex 4. In a Vue 3 project, you can use the npm or yarn command to install the latest version of Vuex.

npm install vuex@next

or

yarn add vuex@next

After the installation is complete, import the Vuex module in the entry file of Vue 3 and use the createApp function to create a Vue application instance.

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

In the above code, we use the createStore function to create a Vuex store instance and use it as a plug-in to use Vuex for state management throughout the application.

Next, let us understand the two most important concepts in Vuex 4: state and operation (mutation).

State is a data source in the application and can be accessed in any component. Operations are methods used to modify state. They change state in a synchronous manner. In Vuex 4, states and operations are defined using pure functions.

For example, we can define a counter state and an increment operation in Vuex.

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

In the above code, we define an initial state counter is 0, and define an operation named increment, which can be passed state.counter to increment the counter value.

Using Vuex states and operations in components is very simple. State and operations can be accessed through the $store object.

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

In the above code, we trigger the increment operation through the commit method, and use the state method to obtain the counterThe current value of the status.

In addition to states and operations, Vuex 4 also introduces new features: actions and getters.

Actions are functions that operate on state asynchronously. In Vuex 4, actions can be defined through the actions attribute.

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

In the above code, we define an action named asyncIncrement, which simulates asynchronous operations through the setTimeout function and triggers after 1 secondincrementOperation.

Getter is a computed property used to obtain status. In Vuex 4, getters can be defined through the getters attribute.

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  }
})

In the above code, we define a getter named doubleCounter, which returns double the counter status.

Using actions and getters in components is similar to using operations and states. Actions can be triggered through the $store.dispatch method, and getter values ​​can be obtained through the $store.getters property.

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    },
    doubleCounter() {
      return this.$store.getters.doubleCounter
    }
  }
}

In the above code, we trigger the asyncIncrement action through the this.$store.dispatch method, and pass the this.$store.getters. doubleCounter to get the value of doubleCounter.

To summarize, Vuex 4 provides a convenient way to manage global data sharing in Vue 3 applications. By defining states, operations, actions and getters, we can easily share and manage data. I hope this article will help you better understand the usage and principles of Vuex 4.

The above is the detailed content of Detailed explanation of the use of state manager Vuex 4 in Vue 3 to achieve global data sharing. For more information, please follow other related articles on the PHP Chinese website!