Vue3-vuex-Moduls模块划分和文件拆分

在VUEX中如果没有其它操作，在这中只是单一状态数，在项目中我们只有一个state

如果我们的业务量越来越大，所以胡数据都堆在一起，以后更改起来就会很麻烦

这时我们就需要使用模块的概念

modules:{
         user:{ //跟用户相关的数据放这
            state:{

            },
            geeters:{

            },
            mutations:{

            },
            actions:{

            },
        },
         article:{ //跟文章相关的保存在这里
            state:{

            },
            geeters:{

            },
            mutations:{

            },
            actions:{

            },
        }   
}        

下面来这个简写

  modules: {
    user,
    article,
    cart,
    goods,
  }

这modules只需要 给个名字

然后我们在最外层写入里面的state，geeters。。。等

const user ={
  state:()=>( {
    name:'lmonkey', //用户存的名字
    slogen:'abc'//存的数据
  }),
  getters: {

  },
  mutations: {

  },
  actions: {

  },
}
const artcle={};
const cart ={};
const goods={};

如图

 如何在页面中使用模块的数据

如图

 在页面的效果

 为什么使用user模块，不是user.state而是state.user

因为我们这个user模块是相当绑定到了state里

模块化的mutations使用

我们要修改这个imonkey的名字

可以这么写

 然后在页面中传值

 这里的名字不用通过模块化去找，但不可以和全局的名字重复不然会优先使用全局的

原图：

效果图

 模块化的getters（计算属性）使用

 在页面引用中同样上一mutations使用一样

 效果图

 模块actions异步请求

　　在actions下申明一个方法

　　这里我用定时器来模拟异步请求，然后执行mutations的方法进行更改传值

　　如图

 　页面代码

 使用dispatch触发方法

效果图

 文件拆分

在vuex.js中我们看整体布局感觉很乱，我们还可以通过拆分来进一步整理

首先是全局

 把一个一个剪切getters,mutations,actions里的内容然后放到对应的js文件里，再导入到这个js文件

把全局的state放到最外层声明

如图

 然后一起导入到对应的index.js文件里

 然后是模块化的modules,在全局里不变一样引用名字，但js内容也要单独放到一个js和全局引用一个

 然后在引入到index.js

如果想优化模块化的布局也可以像这样一个一个文件单件生成引入到相应的模块化js里

这里就不再举例

再看一下index.js的整体

 优化完成