Detailed explanation and examples of using Vuex to manage global state in Vue

Vue.js is a popular front-end framework that provides many convenient features, but when the application becomes more and more complex, we will soon find that passing large amounts of data to child components becomes very difficult. This is why Vuex becomes so important in Vue. Vuex is a global state manager that makes sharing data and state easier. In this article, we will take a closer look at how Vuex works and demonstrate how to integrate it into your Vue application.

What is Vuex

Vuex is a state management model and library for Vue.js applications. It is often used to solve cross-level, multi-component, and multi-page state sharing problems. It centralizes the application's state into a single store and provides a mechanism to implement shared state. Used to manage all states of an application throughout its life cycle.

The core concept of Vuex

Vuex consists of the following four core parts:

state

State is the application state storage area managed by Vuex. State is a plain JavaScript object used to store the state of an application. When declaring state, we define an object. The following example defines a simple state object:

const state = {
    count: 0
}

getter

Getter is used to obtain data from the state. The obtained data can be returned after some processing based on the current state, similar to Computed properties of state.

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

mutations

Mutation is used to ensure one-way operation of data, that is to say, mutations can change the data, but cannot obtain the data. Mutation is used to modify state, and cannot operate state asynchronously. To modify state, you need to use the commit method.

const mutations = {
  increment(state) {
    state.count++
  }
}

actions

Actions are used to handle asynchronous operations. Actions actually trigger standard mutations. It allows you to encapsulate all updates about state without changing it directly. For example, if we want to send an asynchronous request in the application, we can call an action on the side to handle it.

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Implementing a Vuex counter example

We will use my own exposed [Vue-cli 3](https://www.npmjs.com/package/vue-cli) sample project , initialize a Vue project through official scaffolding.

$ vue create vuex-example

Then install vuex:

$ npm install vuex --save

Next we will create a simple example of a counter application for increasing and decreasing numbers. However, we will use Vuex to manage the state of this counter. First, we will create a new store.js file under the project's src folder. This is our Vuex store.

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

In the above code, we first imported Vuex and Vue. Then, we installed Vuex using the Vue.use() method. We define a simple state object to store the current counter value. We also define two mutations, which are used to increase and decrease the current counter value. We define two actions, one for performing an increase operation and another for performing a decrease operation. Finally, we define a getter to get the current counter value.

Next, we commit the changes and use vuex and store in App.vue:

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

In this file, we import the Vuex store module. In the Vue instance, we mix in the store object so that Vuex state can be used throughout the application. Next, we define a computed property to get the current counter value. We also define two methods for incrementing and decrementing the current counter value. We use the dispatch method to call these actions separately.

Finally, we pass the store to the vue instance so that the state in the store can be accessed in the application. Now you can open your browser, go into the application and you will see a simple counter and when you click on the button it will increment or decrement the current counter value.

Summary

Vuex is a state management pattern and library for Vue.js applications that makes sharing data and state easier. State, Getter, Mutation and Action are the core concepts of Vuex. An in-depth understanding of them can make developers more flexible in handling state changes in Vuex. Based on this, we built a timer sample program to demonstrate the use of Vuex. If you want to learn Vuex in more depth, check out its official documentation.

The above is the detailed content of Detailed explanation and examples of using Vuex to manage global state in Vue. For more information, please follow other related articles on the PHP Chinese website!