VUE3 Getting Started Tutorial: Using Vuex State Management to Implement Global Data Management

With the continuous development of Vue.js, Vue 3 has also been officially launched and has gradually been widely used. Compared with Vue 2, Vue 3 has many optimizations, such as proxying data through Proxy objects to achieve data interception and hijacking. . However, in practical applications, since large application projects often have many components, the management of global state becomes more and more important. At this time, Vuex is a very good solution.

1. Introduction to Vuex

Vuex is the official state management library of Vue.js, designed to solve the problem of sharing state (data) between multiple components in Vue applications. Its core concepts include:

• State (state): the data that needs to be managed globally in the application.
• Getter (value taker): used to derive some state from state (similar to the computed property in a component).
• Mutation (mutation): used to modify the data in the state. Since the Vuex data is updated synchronously in the mutation, the consistency of the data can be guaranteed.
• Action (action): Similar to mutation, it is also used to modify data in the state, but it can operate asynchronously, and can be used to initiate asynchronous operations such as network requests.

Through the flexible use of these core concepts, Vuex can help us achieve global data management, thereby simplifying the transfer and operation between components.

2. Create Vuex Store

The data in Vuex is stored in the store object, so we first need to create a store object. In Vue 3, the way to create store objects is slightly different from Vue 2.

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

In the above code, we created a store object through the createStore method and passed in an object. The object contains four attributes: state, mutations, actions, and getters. Among them, the state attribute defines the initial value of the global state count as 0; the mutations attribute defines a mutation method increment, which implements the function of increasing the count value by 1; the actions attribute defines an action method incrementAsync, which implements the asynchronous increment of the count value. The function of 1; the getters attribute defines a getter method doubleCount, which returns twice the count value.

3. Use Vuex in the component

After creating the store object, we can use the data and methods directly in the component. In Vue 3, you can use the syntax of 5101c0cdbdc49998c642c71f6b6410a8 to use data and methods in Vuex.

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

In the above code, we obtain the store object through the useStore function, and call the increment method in the handleClick method to modify the count value. In the template, we can get the count value through store.state.count, and get twice the count value through store.getters.doubleCount.

4. Summary

Through the introduction of this article, we can understand the basic concepts and usage of Vuex. In actual development, if the application needs to manage a large amount of global data, then using Vuex is a good choice, which can greatly simplify the interaction between components and improve development efficiency.

The above is the detailed content of VUE3 Getting Started Tutorial: Using Vuex State Management to Implement Global Data Management. For more information, please follow other related articles on the PHP Chinese website!