快速、高效的学习vuex
Vuex是一个公共状态管理模式,最好的一种非父子组件传值的一种方案.
1、vuex数据传递的流程
当组价需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法,actions的每一个方法里面都会有一个
commit方法,用来触发mutations里面的方法, mutations用来修改state中的数据。当mutations里面的方法触发的时候数据
就会发生改变,因为数据是响应式因此组件中的数据也会发生改变
2、 actions
用来处理异步 以及一些业务逻辑
actions里面所以的函数都会有2个参数
参数1 为一个对象 包含{commit dispatch state}
参数2:是传递过来的参数
actions里面的方法如果想要触发的时候必须通过dispatch
辅助函数
mapActions
方案一:
methods: {
...Vuex.mapActions(["handleAdd"])
}
方案二:
methods: {
...Vuex.mapActions({
Add:"handleAdd"
})
}
mutations
用来做数据的增删改查 mutations里面的方法用来修改state中的数据
mutations里面的所有函数都会有2个参数
参数1:state
参数2:传递过来的参数
mutations里面的方法想要触发的时候必须通过commit
辅助函数
mapMutations
methods: {
...Vuex.mapMutations(["handleMutationAdd"])
}
methods: {
...Vuex.mapMutations({
handleMutationAdd:"handleMutationAdd"
})
}
getters:
getters就相当于组件中的computed一样,也是可以进行数据的缓存
主要的作用:监听state中数据的变化,当state中的数据发生改变的时候就会触发getters里面的方法
getters中的每一个函数都会有一个参数 这个参数是state
辅助函数
mapGetters
computed:{
...Vuex.mapGetters(["方法名称"])
}
computed:{
...Vuex.mapGetters({
key:"方法名称"
})
}