vuex映射属性详解mapState、mapGetters、mapMutations、mapActions、modules的使用(一)

vuex映射属性详解

vuex的映射属性不要太爽了！！

命名空间（牢记）

官网介绍：
			模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应
			如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
			
解释一波：
		每个模块都有自己的state，getters，mutations，action，modules，但是这些属性在这个模块没有命令空间（namespaced: true）属性的时候，那么这个模块的state，modules是自己的，而getters，mutations，action是全局的，就是说是定义在最外边的vuex对象的身上的，如果和最外边的vuex对象的方法名字有冲突的时候，两个都会执行，而不是我们理解的会覆盖

不存在嵌套的映射关系

组件内引入vuex
import {mapState,mapGetters,mapMutaions,mapActions} from "vuex"

mapState,mapGetters 会被映射为计算属性，直接使用就可获取到
computed:{
		...mapState(["属性名"]),
		...mapGetters(["getters的方法名"])
}

mapMutaions,mapActions会被映射为方法。在调用的时候直接 @事件="方法名" 就可使用
methods:{
	...mapMutaions(["mutations方法名字"]),
	...mapActions(["actions的方法名"])
}

命名空间的使用

modules:{
		名字:{
        namespaced:true,
        state:()=>({}),
        getters:{},
        mutions:{},
        actions:{}
      }
}

vuex映射属性详解mapState、mapGetters、mapMutations、mapActions、modules的使用(二)