Vuex实现模块式开发,如果项目过大，组件过多，接口和数据也很多，可以让Vuex实现模块式开发，就是把大仓库拆分成很多的小仓库进行存储

1.在store文件下新建需要的文件也就是小仓库如：home/index.js 写完小仓库需要合并到大仓库

使用vuex前下载安装：npm i vuex@3

2022年2月7日，vue3成为默认版本，如果直接npm i vue 安装的直接就是vue3了，并且vue3成为默认版本的同时，vuex也更新到了4版本，那么也就是说如果我们直接npm i vuex安装的是vuex4，而vuex的4版本只能在vue3中使用，vue2中要用vuex的3版本，vue3中要用vuex的4版本，所以使用vue2要安装vuex3, : npm i vuex@3

需要在入口文件（main.js）注册vuex仓库：

import Vue from 'vue'
import App from './App.vue'
//引入仓库
import store from '@/store'
new Vue({
   render:h =>h(App),
   
   //注册仓库，组件实例的身上会多一个属性$store属性
   store,
}).$mount("#app");

A.  store/module/home/index.js(小仓库)

//home模块的小仓库
const state ={};
const mutations ={};
const actions ={};
const getters ={};
export default {
  state,
  mutations,
  actions,
  getters
}

B.store/store.js(大仓库)

第一种写法

import Vue from 'vue'
import Vuex from 'vuex'//Vuex其实是一个对象，对象身上有一个store方法，而这个方法是一个构造函数
//需要使用插件一次
Vue.use(Vuex)

//引入小仓库
import home feom './home'
import search from './search'


//对外暴露Store类的一个实例
export default new Vuex.Store({
      //实现Vuex仓库模块式开发存储数据
      modules:{
          home,
          search
      }
})

第二种写法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 适用于划分各个模块，而各个模块要一个一个引入，太麻烦了，这是就用到了require.context
// require.context函数接受三个参数：
// directory {String} -读取文件的路径
// useSubdirectories {Boolean} -是否遍历文件的子目录
// regExp {RegExp} -匹配文件的正则

const modulesFiles = require.context('./module', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
//reduce callback函数第一个参数是上一次回调函数的返回值，或者提供的初始值（initialValue）
//callback函数第二个参数是当前正在处理的元素
//reduce方法第二个参数写的是[]，modules就是数组。
//reduce方法第二个参数写的是{}，modules就是对象。


export default new Vuex.Store({
  modules
})