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.![Insert picture description here](https://img-blog.csdnimg.cn/20210112190642339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NDE2Mzc2NQ==,size_16,color_FFFFFF,t_70)
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![Insert picture description here](https://img-blog.csdnimg.cn/20210112190944890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NDE2Mzc2NQ==,size_16,color_FFFFFF,t_70)
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” }),