一、vuex的三个主要参数:state,mutation,actions
1.state的基本使用以及介绍。
state是共享数据的状态,所有共享的参数都在这里面的定义。
访问state的方式有两种
方式一、this.$store.state.‘参数名称’ (如果在template中使用可以去省略this).
eg:state:{
num : 0
}
在模板中使用{{$store.state.num}}
在methods中使用 this.$store.state.num
方式二、使用es6解构方式引用映射状态, 相当于把共享状态变成自己数据一样使用
步骤一、 import {mapState} from 'vuex'
步骤二、computed:{
...mapState(['状态参数名称'])
}
步骤三、在组件中使用
eg: import {mapState} from 'vuex'
computed:{
...mapState(['num'])
}
在模板中使用{{num}}
在函数中使用this.num
2.mutation的基本使用以及介绍。
mutation是修改状态管理的方式,所有共享的参数都在这里面的修改。每一个状态修改需要一个函数,通过commit方法调用该函数名称
调用mutation的方式有两种
方式一、this.$store.commit.‘函数名称’
eg:mutation:{
changeNum(state){
state.num++
}
}
在methods中使用 this.$store.commit('changeNum')
方式二、使用es6解构方式引用映射状态, 相当于把共享状态变成自己数据一样使用
步骤一、 import {mapMutation} from 'vuex'
步骤二、methods:{
...mapMutation(['状态函数名称'])
}
步骤三、在组件中使用,相当于自己的组件一样使用直接使用this.'函数名称 '
eg: import {mapMutation} from 'vuex'
methods:{
...mapState(['changeNum'])
}
在函数中使用this.changeNum()
3.actions的基本使用以及介绍。
actions是处理异步需要修改的参数,所有需要异步修改的参数都在这里面。每一个状态修改需要提交一次commit,通过commit方法调用该函数名称,然后再使用mutation去修改状态,注意!!!所有的共享数据状态只能在mutation中去修改
调用actions的方式有两种
方式一、this.$store.dispatch.‘函数名称’
eg:actions:{
changeAsyncNum(context){
setTimeout(()=>{
context.commit('changeNum')
},1000)
}
}
在methods中使用 this.$store.dispatch('changeAsyncNum')
方式二、使用es6解构方式引用映射状态, 相当于把共享状态变成自己数据一样使用
步骤一、 import {mapActions} from 'vuex'
步骤二、methods:{
...mapActions(['状态函数名称'])
}
步骤三、在组件中使用,相当于自己的组件一样使用直接使用this.'函数名称 '
eg: import {mapActions} from 'vuex'
methods:{
...mapState(['changeNum'])
}
在函数中使用this.changeAsyncNum()、
小编初来首编,望各位看官多多点评,有机会多多交流,小编只是发表自己认为正确的,错的地方还请大神多多指点,共同学习。谢谢关照。