vuex模块化
- 为什么需要模块化？
- 团队协作开发需要
- 方便后期维护管理
- 怎么模块化？
- 将除modules对象中的内容按照指定的拆分标准进行按文件分离
- 在index.js中导入并在modules对象中注册
有什么需要注意的？
- 因为模块化，后续的语法需要有所调整，具体见下
- 命名冲突时会执行自动合并策略
- state，名字相同也不会冲突
- mutations、actioms里同名方法会被合并成数组，都执行（index.js中的是最先执行的）
- getters如果同名，无法合并，直接报错
- 通过命名空间来避免冲突（给每个模块开启命名空间）
- 设置模块的namespaced属性为true即可
vuex模块化后的语法：
- 获取state数据
- 对象属性：this.$store.state.模块名.属性名
- 辅助函数：mapState
- 作用：将指定的state中的数据映射为组件自身的计算属性
- 语法：
- 写在computed中
- …mapState(模块名,[属性名1,属性名2,…])
- 同步修改数据
- 对象属性：this.$store.commit(**模块名/**方法名,载荷数据)
- 辅助函数：mapMutations
- 作用：将指定的mutations中的方法映射为组件自身的方法
- 语法：
- 写在methods中
- …mapMutations(模块名,[方法名1,方法名2,…])
- 异步修改数据
- 对象属性：this.$store.dispatch(**模块名/**方法名,载荷数据)
- 辅助函数：mapActions
- 作用：将指定的Actions中的方法映射为组件自身的方法
- 语法：
- 写在methods中
- …mapActions(模块名,[方法名1,方法名2,…])
- 获取修饰数据
- 对象属性：this.$store.getters[“**模块名/**属性名”]
- 辅助函数：mapGetters
- 作用：将指定的getters中的数据映射为组件自身的计算属性
- 语法：
- 写在computed中
- …mapGetters(模块名,[属性名1,属性名2,…])
