What is Vuex state management in Vue and how to use it?

What is Vuex state management in Vue and how to use it?

Vue is a popular front-end framework. Its ease of use and powerful functions make it widely used in projects. As front-end projects become larger and more complex, data management becomes more and more difficult to maintain. At this time, status management becomes particularly important. As Vue's state management tool, Vuex can help us better organize and manage application states and improve code maintainability. This article will introduce the basic concepts and usage of Vuex state management, and help readers understand the role and practical application of Vuex state management.

1. Basic concepts of Vuex state management

1. State

State storage is the core part of Vuex, used to store shared information between components state. The data structure of State can be an array, object, etc., unlike the data of components, State data is global. The data in State will be managed by Store objects and can be easily accessed and operated in the project.

2. Getter

Getter can be considered as the calculated property of State. In the component, you can access the variables in the State object through getter. Getter defines some calculations that can be reused. The function is used to obtain data in State, which is equivalent to the computed property in Vue. Using Getters in state management can encapsulate some complex calculation logic and facilitate sharing and reuse among multiple components.

3. Mutation

Mutation defines some functions for updating State and modifying the data in State. It can only perform synchronous operations. Since modifications to the State must go through Mutation, this ensures that modifications to the data can be tracked and the State can be updated in real time. The use of Mutation is also very simple. Just call the $store.commit method in the component and pass in the corresponding Mutation name.

4. Action

Action is an asynchronous operation that handles business logic. It can include any asynchronous operation, such as HTTP request, setTimeout or other asynchronous operations. When an asynchronous operation is required, the Action will be submitted to the Mutation, and the Mutation will perform a synchronous operation to update the State. The difference between Action and Mutation is that Action can contain asynchronous operations. Actions can also call other Actions and Mutation.

5. Module

Module allows us to split the Store into modules, and each module can have its own State, Mutation, Action, and Getter methods. This can make the Store more organized, improve the readability of the code, and facilitate team collaboration. Vuex's modularity mechanism is similar to ES6's modularity. Using modularity, you can easily extend and modify the Store.

2. How to use Vuex state management

1. Installation and reference to Vuex

You need to install and reference Vuex before using Vuex.

Installation method:

npm install vuex --save

Reference method:

import Vuex from 'vuex'
Vue.use(Vuex)

2. Create Store

When using Vuex state management, we first You need to create a Store object, which should be a shell that contains the state of the entire application. Creating a Store object is also very simple. You only need to combine State, Mutation, Action, Getter and other modules together.

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

Vue.use(Vuex)

// 定义应用的初始状态
const state = {
  count: 0
}

// 定义 Mutation，处理 State
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

// 定义 Action，处理异步操作
const actions = {
  incrementAction ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 定义 Getter，获取 State 中的数据
const getters = {
  getCount: state => state.count
}

// 创建 Store 对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

3. Use Store in the component

After the Store is created, it can be used in the component. The method of using Store in a component is to call it through this.$store.xxx, where xxx can be State, Mutation, Action, or Getter.

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

4. Using Module in Components

When the application becomes larger and larger, using State, Mutation, Action, and Getter becomes a bit messy. In order to better organize the code, we can merge them into a Module.

const appModule = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  actions: {
    incrementAction ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
}

export default new Vuex.Store({
  modules: {
    appModule: appModule
  }
})

Then it can be used like this in the component:

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters['appModule/getCount']
    }
  },
  methods: {
    increment () {
      this.$store.commit('appModule/increment')
    },
    decrement () {
      this.$store.commit('appModule/decrement')
    }
  }
}
</script>

The above is the introduction of Vuex state management in this article, I hope it will be helpful to readers. In practical applications, the importance of state management cannot be ignored. Proper use of Vuex can make development more efficient and smooth.

The above is the detailed content of What is Vuex state management in Vue and how to use it?. For more information, please follow other related articles on the PHP Chinese website!