Five cores of vuex, and understanding

Vuex is a state management tool specially developed for vue.js. It can store the state of all components and use corresponding rules to ensure that the state changes in a predictable way.

There are five major states in vuex:

The core of vuex is to use:

1.state: storage state

It is a warehouse that stores public data, and any component can call the data in it.

Use: You can declare the data directly in the state.

2. Getters: calculated attributes in vuex

It is equivalent to the calculated attribute in the component. When the data in the state changes, the data in the getters also changes.

Use: It is at the same level as state in vuex, and is similar to that in vux.

3.mutations

The data in the state is called, and the data in the state can be added and modified.

The method of use is in this.$store.commit()

4.Actions asynchronous

Define the requirement in the warehouse store to call the mutations method, and define the template and method to trigger the change state in the corresponding component

Note: mutations must be synchronous functions, actions can be asynchronous functions.

5.modules template

Define different templates and modules methods in the warehouse,

Obtained in the corresponding component and displayed on the page

Generally used for management when doing large-scale projects

Placement save

There are two easy ways to operate vuex in vue

import { mapState, mapMutations } from “vuex”;

mapState uses the extension in the computed to use...mapState({ user: “user” }),

Available array mode and object mode

Array mode:

…MapState([]) is used to receive data in vuex. Use commas to separate

Object mode:

…MapState({}) uses…mapState({ user: “user” }),