Tutorial for getting started with Vue state management library Vuex

is a popular JavaScript front-end framework that provides a convenient way to build responsive user interfaces. However, as our applications become more complex, a more advanced way to manage the state of an application may be needed. That's where Vuex works.

Vuex is a state management library specially developed for applications. It adopts a centralized architecture that stores the state of all components of the application in a single place. This makes state management and maintenance easier.

In this article, we will introduce in detail the state management of Vue and the basic concepts and usage of Vuex.

Vue's status management

In Vue, the state of a component is usually stored in the component's data properties. These properties can be modified through component methods. However, as our applications become more complex, we may encounter the following problems:

Shared state is required between components.
Some states need to be shared by multiple components, but these components do not have a parent-child relationship.
Some states need to be saved to restore when the application reloads.

To solve these problems, we need a more advanced way to manage the state of the application. That's where Vuex works.

Basic concepts of Vuex

The store in Vuex contains the following parts:

state: Stores the status of the application.
mutations: Method used to modify state.
actions: Methods used to handle asynchronous operations.
getters: Computed properties used to obtain state.

Let's take a look at these parts in more detail.

State

The core of Vuex is the state in the store. It is similar to the data property in a component, but it can be shared by multiple components. state can be accessed directly, but can only be modified through mutations.

Here is a simple state example:

const store = new ({
  state: {
    count: 0
  }
})

Here is a state property named count, with its initial value of 0.

Mutations

mutations is a method used to modify state. They must be synchronized functions that are responsible for modifying the data in state. Vuex tracks the calls to each mutation to be able to record the change history. mutations can accept two parameters: state and payload. payload is an object containing the attributes to be modified.

Here is a simple mutation example:

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++
    },
    decrement(state) {
      --
    }
  }
})

There are two mutations defined here: increment and decrement. They are used to increase and decrease the value of the count property, respectively.

Actions

actions are methods used to handle asynchronous operations. They can contain any asynchronous operations, such as getting data from the server, submitting forms, etc. actions cannot directly modify state, but they can be modified by committing mutations.

Here is a simple example of actions:

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++
    },
    decrement(state) {
      --
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

Here is a defined action: asyncIncrement. It calls increment mutations after 1 second to increase the value of the count property.

Getters

getters is used to get computed properties in state. They are similar to the computed attribute in a component, but they can be shared by multiple components. getters accepts the state parameter and returns a calculation result.

Here is a simple getters example:

const store = new ({
  state: {
    todos: [
      { id: 1, text: 'Buy milk', done: false },
      { id: 2, text: 'Do laundry', done: true },
      { id: 3, text: 'Read book', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return (todo => )
    },
    undoneTodos: state => {
      return (todo => !)
    }
  }
})

There are two getters defined here: doneTodos and undoneTodos. They are used to obtain completed and unfinished todos respectively.

Use of Vuex

Using Vuex requires you to install it first. You can use npm or yarn to install it:

npm install vuex

// or

yarn add vuex

After the installation is complete, we need to create a store. Stores can be created in the following ways:

import Vuex from 'vuex'
import Vue from 'vue'
(Vuex)
const store = new ({
  state: {
    // state property  },
  mutations: {
    // mutations method  },
  actions: {
    // actions method  },
  getters: {
    // getters method  }
})

In Vue applications, you can inject store into all components through Vue's mixin mechanism:

import Vue from 'vue'
({
  beforeCreate() {
    const options = this.$options
    if () {
      this.$store = 
    } else if ( && .$store) {
      this.$store = .$store
    }
  }
})

Here you use to add a $store property for all components of Vue.

In the process of using Vuex, we can access properties and methods in the store through this.$store in the component:

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

Here is how to access states, getters, mutations, and actions in components. We can access the data in state through computed properties, and modify state through method calls mutations and actions.

Summarize

Vuex is a state management library specially developed for applications. It adopts a centralized architecture that stores the state of all components of an application in a single place. This makes state management and maintenance easier. The core of Vuex is the store, which contains four parts: state, mutations, actions and getters.

In the process of using Vuex, we can access properties and methods in the store through this.$store in the component. Modify state through mutations and actions, and getters to obtain computed properties in state. While using Vuex brings some extra work, it can greatly simplify application state management and maintenance.

This is the article about the introduction to the Vue status management library Vuex tutorial. For more related Vue status management library Vuex content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!