Module

模块是什么？有什么特点？

       模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。         

优点：
        可维护性
        1.灵活架构，焦点分离
        2.方便模块间组合、分解
        3.方便单个模块功能调试、升级
        4.多人协作互不干扰

缺点：
        性能损耗
        1.系统分层，调用链会很长
        2.模块间通信,模块间发送消息会很耗性能

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决这一问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

在store下创建js文件

index.js

在 modules里把创建的两个模块引入进去

import todo from "@/store/todo";
import list from "@/store/list";

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        todo,
        list
    },
  
})

 todo.js

在mutations中定义函数执行修改操作

const todo = {
    namespaced: true,
    state: () => ({
        title: '我是todo模块'
    }),
    mutations: {
        edittitle(state) {
            state.title = '我是修改后的title'
            console.log(state.title)
        }
    },
    actions: {},
    getters: {}
}
//导出
export default todo

about.vue组件内

在computed属性中获取todo模块下title的值

computed: {
  show(){
    this.$store.state.todo.title
  }
}

 命名空间

 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应

为了使模块具有更高的封装度和复用性，可以通过namespaced: true的方法使其成为带命名空间的模块，当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

const todo = {
    namespaced: true,
    state: () => ({
        title: '我是todo模块'
    }),
    mutations: {
        edittitle(state) {
            state.title = '我是修改后的title'
            console.log(state.title)
        }
    },
    actions: {},
    getters: {}
}
export default todo

使用了命名空间后，会自动根据模块注册的路径调整命名

methods: {
  edit() {
    this.$store.commit('todo/edittitle')
  }
},