vuex学习

vuex
vuex是实现组件全局状态（数据）管理的一种机制，可以方便组件之间数据的共享

核心概念
state mutation action getter

一、state是提供唯一数据源
使用
1、import{mapState}from ‘vuex’
在computed:{
…mapState([‘num1’,‘num2’])
}
{{num1}}和{{num2}}
2、{{$store.state.num1}}

二、mutation是用于变更state中的数据,只有mutation中才能修改state的值
使用
1、mutations：{
add(state){
state.num1=5
state.num2=6
}
}
methods:{
add1(){
this.$store.commot(‘add’)
}
}
2、import{mapMutation} from ‘vuex’
methods:{
…mapMutation([‘add’,‘sub’])
add1(){
this.add()
}
}
三、action是用于处理异步任务，不能直接修改state中的值，必须通过context.commit(‘add’)
使用
1、mapAction
2、this. $store.dispatch(‘add1’)
四、getter是用于对state中的值进行加工处理，形成新的数据，state中的值改变了getter的值也会改变
使用
1、getters：{
shownum(state){
return ‘当前最新值为’+state.num
}
}
mapGetter
2、this. $store.getters.shownum