Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules.
Preface
Vuex execution process
The component calls the action through dispatch, the action triggers the mutation through commit, and the mutation is responsible for modifying the state, and after modifying the state, it re-renders the affected dom.
Installation and introduction
1. Installation
npm install vuex -S
2. Introduce
Create new: store/.
import vue from 'vue';
import Vuex from 'vuex';
(Vuex);
export default new ({
strict:true,//Strict mode to prevent direct modification of state (the performance is very poor, change to false when publishing) state:{
a:1,
b:2
},
mutations:{
addA(state,val){
+=val;
},
addB(state,val){
+=val;
}
},
actions:{
addA({commit},val){
//Call addA() in mutations commit('addA', val);
},
addB({commit},val){
//Call addB() in mutations commit('addB', val);
}
},
//Equivalent to computed getters:{
getA(state){
return ;
},
getB(state){
return ;
},
count(state){
return + ;
}
},
modules:{
}
});
3. Mount
import store from './store';
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
use
Mapping relationships
mapState > computed
mapGetters > computed
mapMutations > methods
mapActions > methods
State and mapState
state is the core of vuex and is the place where data is stored uniformly.
Get the value from the store. (Not recommended)
<template>
<div>
a:{{$}}
<br>
b:{{$}}
</div>
</template>
The official recommendation is to obtain it through computed, but it will be troublesome if you need to obtain multiple values.
mapState
<template>
<div>
a:{{a}}
<br>
b:{{b}}
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "MapState",
computed:{
//Map the properties in it to computed ...mapState(['a','b'])
}
}
</script>
getters and mapGetters
Gets the value in getters.
<div>
a:{{$}}
<br>
b:{{$}}
<br>
a+b={{$}}
</div>
Use mapGetters to map.
<template>
<div>
a={{getA}}
<br>
b={{getB}}
<br>
a+b={{count}}
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "MapGetters",
computed:{
// Map to computed ...mapGetters(['getA','getB','count'])
}
}
</script>
mutations and mapMutations
Mutation is triggered by $.
It is not recommended to call mutation directly to modify it.
<template>
<div>
a={{$}}
<br>
b={{$}}
<br>
a+b={{$}}
<hr>
<button @click="$('add',5)">a+5</button>
</div>
</template>
Use mapMutations to map.
<template>
<div>
a={{$}}
<br>
b={{$}}
<br>
a+b={{$}}
<hr>
<button @click="addA(5)">a+5</button>
</div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
name: "MapMutations",
methods:{
// Map to methods ...mapMutations(['addA'])
}
}
</script>
actions and mapActions
The official recommendation is to trigger mutation through action, although it is more troublesome.
Action supports asynchronousness, mutation can only be synchronized.
Trigger action through $.
<button @click="$('addA',5)">a+5</button>
Use mapActions mapping.
<template>
<div>
a={{$}}
<br>
b={{$}}
<br>
a+b={{$}}
<hr>
<button @click="$('addA',5)">a+5</button>
</div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
name: "MapActions",
methods:{
// Map to methods ...mapMutations(['addA'])
}
}
</script>
Modules
When the system is large, the store becomes very bloated.
To facilitate the modular management of the store, Vuex allows us to split the store into modules.
Each module has its own state, mutation, action, getter, and even nested submodules.
Supplementary knowledge:Store and get data to vuex - and call asynchronous methods directly invoke
Store data to vuex variables
1. Add userInfo: {},
Add synchronous user information - pass the parameter userInfo to USER_INFO
Create a method - no asynchronous method
syncUserInfo({commit}, userInfo){
commit(USER_INFO, {userInfo});
},
3. Create an intermediate variable
export const USER_INFO = 'user_info';
4. Introduce variables -USER_INFO
import {
USER_INFO
} from './mutation-types'
5. Introduce variables in
import {
USER_INFO
} from './mutation-types'
Assign userInfo to state
[USER_INFO](state, {userInfo}) {
= userInfo;
},
6. Methods in direct call from outside the world syncUserInfo
import {mapActions} from 'vuex'
methods: {
// Save to vuex- is a method. Need...Extension character expansion ...mapActions(['syncUserInfo']),
}
Get data from vuex
1.Introduce import {mapState} from 'vuex';
2. Calculate properties
computed:{
...mapState(['userInfo'])
},
Directly call the asynchronous method in vuex---
this.$
created(){
// Call the method in vuex-actions - As soon as you enter the app, you need to verify the timeliness of the login this.$('getUserInfo')
},
// 7. Asynchronously obtain user informationasync getUserInfo({commit}){
const result = await getUserInfo(); // Call the getUserInfo method in actions---I need to import (result);
if(result.success_code === 200){
commit(USER_INFO, {userInfo: });
}
},
Calling getUserInfo method in actions---need to be introduced
import {
getUserInfo,
} from '../api'
----------------------
// 2.9 Get logged in user informationexport const getUserInfo = () => ajax(BASE_URL + '/api/user_info');
The above instructions for using vuex access values and mapping functions are all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.