I started an internship recently and needed to use vuex. I felt very unfamiliar, so I watched the tutorial on the official website + technical fat and recorded it.
Reference link:
https://vuex.vuejs.org/zh-cn/intro.html
https://juejin.im/entry/59191b6b0ce4630069f6a3ad
1. Introduction to knowledge points
1. State management is divided into three parts: state, view, and actions. The core of the entire vuex is the store, and the state of vuex is responsive. When the Vue component reads the state from the store, if the state in the store changes, the corresponding components will also be efficiently updated accordingly. The state in the store cannot be changed directly, the only way to change the state in the store is to explicitly commit a mutation .
2. state: The easiest way to read the state from a store instance is to return some value in the Calculator. vuex "injects" state from root component into each child component via store
When a component needs to obtain multiple states, use the mapState helper function to generate computed properties.
3. Getters: state derived from state. (such as adding and subtracting data, filtering, etc.), using mapGetters
4. Mutation: Submitting a mutation is the only way to change the state in the vuex store and must be synchronized . store.commit('')
Constants can be saved in a file and then called via constants.
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// We can use ES2015-style computed property naming to use a constant as the function name
[SOME_MUTATION] (state) {
// mutate state
}
}
})
5. Action is similar to mutation, with two differences:
1) Action submits mutation, not directly changed state
2) Action can contain any asynchronous operation
Actions are triggered through store.dispatch, state is submitted through context.commit, state and getters are obtained through context.state and context.getter
6. Modules: Split the store into modules
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> the state of moduleA
store.state.b // -> the state of moduleB
2. Build the project
1. Create a vue project, which was recorded in this previous article
2. Install vuex in the project:
npm install vuex --save
3. Quote vuex:
Create a vuex folder in the project directory, and create a store.js file under the folder, (for good distinction)
Introduce vue and vuex into the file,
import View from 'view' import Vuex from 'vuex'
After referencing vuex
Vue.use(Vuex)
4. state
1) In store.js, add a constant object
const state = {
count:1
}
// encapsulate so that the outside can reference
export default new Vuex.Store({
state
})
2) Create a new count.vue in the components folder, and introduce store.js into the template
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<h3>{{$store.state.count}}</h3>
</div>
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
msg:'Hello Vuex',
}
},
store
}
</script>
5. mutations
1) Add in store
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
2) Access mutations in count.vue
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
6. state access object
1) The computed book type is directly assigned, the value in data is changed before output, and the state value in store.js is assigned to the data value in the template
computed:{
count(){
return this.$store.state.count;
}
}
2) Assign value through mapState object, in count.vue
import {mapState} from 'vuex';
computed:mapState({
count:state=>state.count
})
3) Assignment through the array of mapState
computed:mapState(["count"])
7. Modify the state of Mutations
1) When you need to pass a value: add the parameter n to the add method in the store
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
2) in count.vue
<p>
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
</p>
3) Use the template method to get mutations: reach a state that can be called directly, not applicable to commit value
import { mapState,mapMutations } from 'vuex';
methods:mapMutations([
'add','reduce'
]),
It seems that the commit method must be used with parameters. I don't understand it very well here. . .
4) Use in the template:
<button @click="reduce">-</button>
8. Getters (can be seen as a computed property of store.js)
1) Declaration and reference in store.js
const getters = {
count:function(state){
return state.count +=100;
}
}
export default new Vuex.Store({
state,mutations,getters
})
2) In count.vue (there can only be one property in the vue constructor, use the ... object spread operator)
computed:{
...mapState(["count"]),
count(){
return this.$store.getters.count;
}
},
mapGetters simplifies template writing
import { mapState,mapMutations,mapGetters } from 'vuex';
similar to mapState
...mapGetters(["count"])9. Actions modify the state asynchronously
The basic function is similar to mutation
1) Declaration in store.js
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
context: context object
commit: pass in the commit object
2）count.vue
<p> <button @click="addAction">+</button> <button @click="reduceAction">-</button> </p>
import { mapState,mapMutations,mapGetters ,mapMutations} from 'vuex';
methods:{
...mapMutations([
'add','reduce'
]),
...mapActions(['addAction','reduceAction'])
},
10. module module group
1) Declaration in store.js
const moduleA={
state,mutations,getters,actions
}
export default new Vuex.Store({
modules:{a:moduleA}
})
2) used in count.vue
<h3>{{$store.state.a.count}}</h3>
computed:{
count(){
return this.$store.state.a.count;
}
},