vuex的核心概念:
- State
- Mutation
- Action
- Gentter
State
提供惟一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储。
组建中访问State中数据的第一种方式:
this.$store.state.全局数据名称
组件访问State中数据的第二种方式:
从vuex中按需导入mapState函数
import {{mapState}} from 'vuex'
通过导入的mapState函数,将当前组件需要的全局数据,映射为当前组价的computed计算属性:
//2.将全局数据,映射为当前组件的计算属性
computed: {
...mapState({
'count'
})
}
Mutation
用于变更Store中的数据。
1.只能通过mutation变更Store的数据 ,不可以直接操作Store中的数据
2.通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
mutition的使用
//定义Mutation
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
//变更状态
state.count++
}
}
})
如何在组建中调用mutations中的函数
methods: {
handlel() {
//触发mutations的第一种方式
this.$store.commit('add')
}
}
如何在调用mutations时传递参数
//定义Mutation
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
addN(state,step) {
//变更状态
state.count+=step
}
}
})
组件如何传递参数:
commit作用就是调用某个mutations函数
methods: {
handle2() {
this.$store.commit('addN',4)
}
}
触发mutations的第二种方式
//首先,需要从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'
store:
mutations: {
//count减一
sub(state) {
state.count--
},
}
使用mapMutations调用mutations中的函数,在定义一个函数调用该函数
methods: {
...mapMutations(['sub']),
btnSub() {
this.sub()
}
}
传参:
mutations: {
//count减N
subN(state,step) {
state.count-=step
},
}
组件中使用
methods: {
...mapMutations(['subN']),
btnSub1() {
this.subN(5)
}
}
注意:不要在Mutations中执行异步操作
Action
用于处理异步任务
如果 通过异步操作变更数据,必须通过Action,而不能只用Mutation,但是在Action中还要通过触发Mutations的方式变更数据。Mutations中只允许写同步的代码
const store = new Vuex.Store({
mutations: {
add(state) {
state.count++
}
},
//在actions中,不能直接修改state中的数据;
//必须通过context.commit() 触发某个mutations才行
actions: {
addAsync(context) {
setTimeout(() =>{
context.commit('add')
},1000)
}
}
})
触发Action的方式一
methods: {
handle() {
//这里的dispatch函数,专门用来触发action
this.$store.dispatch('addAsync')
}
}
触发actions异步任务时携带参数:
actions: {
addNAsync(context,step){
setTimeout(() =>{
context.commit('addN',step)//这里调用的addN是mutations内的
},1000)
}
}
组件使用
btnHandler4() {
this.$store.dispatch('addNAsync',5)
}
触发Action的方式二
this.$store.dispatch()是触发actions的方式一,方式二为:需要导入mapActions函数
import {mapActions} from 'vuex'
在actions中定义一个异步的函数
actions: {
subAsync(context) {
setTimeout(() =>{
context.commit('sub')//sub是mutations中的
},1000)
}
}
组件使用
import {mapState,mapMutations,mapActions} from 'vuex'
methods: {
...mapActions(['subAsync']),
btnSub2() {
this.subAsync()
}
}
携带参数
在actions中定义函数
subNAsync(context,step) {
setTimeout(() => {
context.commit('subN',step)
},1000)
}
页面使用,同样也需要导入mapActions
import {mapState,mapMutations,mapActions} from 'vuex'
methods: {
...mapActions(['subAsync',"subNAsync"]),
btnSub3() {
this.subNAsync(8)
}
}
Getter
用于对Store中的数据进行加工处理形成新的数据,他不会改变store中的数据,只是对store中的数据起一个包装作用
- getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性
- store中的数据反生变化时,getter中包装出来的数据也会跟着变化。
Getter的包装
//定义Getter
const store = new Vuex.Store({
state: {
count:0
},
getters: {
showNum(state) {
return '当前最新的数量为【'+ this.state.count+'】'
},
}
}
})
使用getter的第一种方式:
this.$store.getters.名称
使用方式二:
同样需要导入mapGetters
<h1>{{showNum}}</h1>
import {mapGetters} from 'vuex'
computed: {
...mapGetters(['showNum'])
},