Self-motivation
When people are in adversity, their ability to adapt to the environment is amazing. People can endure misfortune, and they can also overcome misfortune, because people have amazing potential, and as long as they are determined to use it, they will be able to overcome the difficulties.
Overview of core concepts
The main core concepts of Vuex are as follows:
- State
- Mutation
- Action
- Getter
State
State provides the only public data source, all shared data must be unified in the State of the Store for storage
// 创建store 数据源，提供唯一公共数据
const store = new Vuex.Store({
state:{
count:0}
})
The first way for components to access data in State:
this.$store.state.全局数据名称
The second way for components to access State
// 1. 从vuex中按需导入 mapState函数
import {
mapState} from 'vuex'
Map the global data needed by the current component to the computed calculated properties of the current component through the mapState function just imported
// 2. 将全局数据，映射为当前组件的计算属性
computed :{
...mapState(['count'])
}
Mutation
Mutation is used to change the data in the Store
① You can only change the data in the Store through mutation, and not directly manipulate the data in the Store.
② Although this operation is a little more cumbersome, it can centrally monitor the changes of all data.
Define Mutation
// 定义Mutation
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
//变更状态
state.count ++
}
}
}
Trigger mutation
// 触发mutation
methods:{
handle1(){
// 触发 mutations 的第一种方式
this.$store.commit('add')
}
}
Can pass transmission when Mutation is triggered
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// state 代表state中的全局数据
add(state,step) {
//变更状态
state.count+= step
}
}
}
Trigger mutations
btnHandler2() {
// 在调用 commit 函数，
// 触发mutations 时携带参数
this.$store.commit('addN', 3)
}
this.$store.commit () is the first way to trigger mutations, and the second way to trigger mutations
// 1. 从vuex 中按需导入 mapMutation 函数
import {
mapMutations} from 'vuex'
Map the required mutations function to the methods method of the current component through the mapMutations function just imported
methods:{
...mapMutations(['add','addN'])
}
So you can’t write asynchronous code in mutations
Action
Action is used to process asynchronous tasks.
If you change data through asynchronous operations, you must use Action instead of Mutation, but in Action, you must indirectly change the data by sending Mutation.
// 定义 Action
const store = new Vuex.Store({
// ...省略其他代码
mutations: {
add(state) {
//变更状态
// 不要在mutations 函数中执行异步操作
// setTimeout(() => {
// state.count++
// }, 100)
state.count++
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
}
methods: {
// 异步 地让 count 自增加一
btnHandler3() {
// 这里的 dispatch函数 专门用来触发 action
// 触发 actions 的第一种方式
this.$store.dispatch('addAsync')
}
}
Carry parameters when triggering actions asynchronous tasks
// 定义 Action
const store = new Vuex.Store({
// ... 省略其他代码
mutations:{
addN(state,step){
state.count += step
}
},
actions:{
addNAsync(context,step){
setTimeout(() =>{
context.commit('addN',step)
},1000）
}
}
}）
// 触发 Action
methods:{
handle(){
// 在调用 dispatch 函数，
// 触发 actions 时携带参数
this.$store.dispatch('addNAsync',5)
}
}
The second way to trigger Action
this.$store.dispatch() is the first method to trigger actions
// 1. 从vuex 中按需导入mapActions 的函数
import {
mapActions} from 'vuex'
Through the mapActions function just imported, map the required actions function to the methods of the current component:
// 2. 将指定的actions 函数，映射为当前组件的methods方法
methods:{
...mapActions(['addASync','addNASync'])
}
Getter
Getter is used to process the data in the Store to form new data
① Getter can process the existing data in the Store to form new data, similar to the calculation properties of Vue
② When the data in the Store changes, the Getter data will also Follow the change
// 定义 Getter
const store =new Vuex.Store({
state:{
count:0
},
getters: {
showNum(state) {
return '当前最新的数量是【' + state.count + '】'
}
}
})
The first way to use Getters
this.$store.getters.名称
The second way to use gettIng
import {
mapGetters} from 'vuex'
computed :{
...mapGetters(['showNum'])
}
The boyfriend can’t make the girlfriend angry. The girlfriend is angry because the boyfriend is wrong. In any case, the boyfriend is wrong. If the boyfriend is wrong, he must willingly accept any punishment from the girlfriend, otherwise he will be matched with the girlfriend boyfriend. Just spit on Han, the boyfriend should make his girlfriend more happy and think more about his girlfriend, know how to pity and cherish his girlfriend, and take care of his girlfriend. To be continued. . . .