What is state management? Let's talk about how to use Vuex for state management

What is state management? The following article will take you through Vuex state management and talk about how to use Vuex for state management. I hope it will be helpful to you!

? 1. What is state management

In development, our applications need to process a variety of data, and these data need to be saved At a certain location in our application, the management of these data is called State Management. (Learning video sharing: vue video tutorial)

Basic implementation of Vuex’s state management (official illustrations are used here)

⏰ How to use Vuex

1. Install vuex

npm install vuex

2. Basic usage:

Store is essentially a container--> stores the state of most applications.

Vuex's state storage is responsive. When the state in the store changes, the responding components will also be updated.

// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"

const app = createApp(App)

app.user(store)
app.mount("#app")

// src/store/index.js
import { createStore } from "vuex"

const store = createStore({
  state: () => ({
    counter: 100
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})
export default store

//App.vue
<template>
  <div>
    <!-- store 中的counter -->
    <h2>方式一：模板:App当前计数: {{$store.state.counter}}</h2>
    <h2>方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
    <h2>方式三：在compositionAPI中setup函数使用:{{counter}}</h2>
    <button>+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    storeCounter () {
      return this.store.state.counter
    }
  }
}
</script>

<script>
import { toRefs } from &#39;vue&#39;
import { useStore } from &#39;vuex&#39;

const store = useStore()
const { counter } = toRefs(store.state)

function increment () {
  store.commit("increment")
}

</script>
 
<style></style>

? Single state tree and mapState auxiliary function

1. Single state tree

This means that each application contains only one store instance

Advantages: If the status information contains multiple store instance objects, then it will be more troublesome to maintain and manage later. Single state tree is the most direct way for us to find the fragment of a certain state, so it is more convenient to maintain

2. mapState auxiliary function

If you need to obtain multiple states, you can use the mapSate auxiliary function

There are two ways, namely using mapState in optionsAPI and composition API

? Basic use of getters

1. Use of getters

Scenario: When we need to use some attributes in the store after a series of changes, we can choose to use getters

2. getters Two parameters

In the above scenario, the first parameter accepted by getters is state, and getters can also receive the second parameter

3. The return function of getters (understanding)

The function itself in getters can return a function, then it is equivalent to calling this function where it is used

4. Auxiliary function of mapGetters

? Basic use of mutation

The only way to change the state of the store in vuex is to submit a mutation

Note: Mutation is canceled in pinia, which will be discussed later. The composition API with vue3 will be better than vuex, so here is the options API demonstration

##1. mutation Carrying data

Many times we will carry some data when submitting a mutation. At this time, we can use it like this

2. mutation Important principles

mutation must be a synchronous function, that is, asynchronous functions (such as sending network requests) are not allowed

? Basic use of actions

Action is similar to mutation, the difference is:

Action submits a mutation instead of directly changing the state;
• Action can contain
• any Asynchronous operation;

Parameters

context:

• Context is a context object that has the same methods and properties as the store instance;
• You can get the commit method from it to submit a mutation, or through context.state and context.getters Get state and getters;

1. Distribution operation of actions

2. Auxiliary functions of actions

3. Asynchronous operations of actions

?Basic use of module

Due to the use of a single state tree, all the states of the application will be concentrated into a relatively large object. When the application becomes very complex, the store object It can become quite bloated. So Vuex allows us to split the store into modules.

Each module has its own state, mutation, action, getter, and even nested submodules

1. The local state of the module

For mutations and getters inside a module, the first parameter received is the module’s local state object.

2. module namespace

By default, actions and mutations inside the module are still registered in in the global namespace. So naming cannot be repeated

If we want the module to have a higher degree of encapsulation and reusability, we can add namespaced: true to make it a module with a namespace: When the module After being registered, all its getters, actions and mutations will automatically be named according to the path registered by the module.

3. module modifies or dispatches the root component

Modify the state in the root in the action, then there are the following methods:

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of What is state management? Let's talk about how to use Vuex for state management. For more information, please follow other related articles on the PHP Chinese website!