vueX 自动匹配modules，vueX插件vuex-persistedstate自动存储本地,vue 自动引入所有路由，vue批量引入组件

vueX按模块写，需要手动引入模块，可以通过代码自动引入，方便快捷

代码： index.js

// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {});


//const moduleFiles = require.context('./modules', true, /\.js$/)
//const modules = {}
//moduleFiles.keys().map(key => {
//  const filename = key.replace(/^\.\/(.*)\.\w+$/, '$1')
//  modules[filename] = moduleFiles(key).default || moduleFiles(key)
//})

const store = new vuex.Store({
	modules,
})

目录格式：

modules->app.js 

const state = {
};
const mutations = {
 
};
const actions = {
 
};
export default { 
    namespaced: true, //命名空间
    state, 
    mutations, 
    actions 
};

 

vue 自动引入所有路由

// 获取./children下得所有js
const routerFiles = require.context('./children', true, /\.js$/)
// 获取每一个文件抛出得数据，并组合到routerObject
const routerObject = routerFiles.keys().reduce((allArray, key) => allArray.push(...(routerFiles(key).default || routerFiles(key))) && allArray, [])

const createRouter = () =>
  new Router({
    scrollBehavior: () => ({
      y: 0
    }),
    routes: routerObject 
 })

// 或者
const createRouter = () =>
  new Router({
    scrollBehavior: () => ({
      y: 0
    }),
    routes: [
          path: '/first',
          meta: {
          title: '第一路由'
        },
        component: Layout,
        children:routerObject
    ]
 })

vue批量引入组件 

const componentsFiles = require.context('@/components', true, /\.vue$/)
// 组件懒加载
// const componentsFiles = require.context('@/components', true, /\.vue$/, 'lazy')
const componentsObject = componentsFiles.keys().reduce((allObject, key) => {
let KeyName = key.replace(/(\.\/|\.vue)/g, '')
KeyName = KeyName.replace(/[a-zA-Z]/, (n) => n.toUpperCase()) // 首字母大写
  .replace(/\/[0-9|a-zA-Z]/g, (n) => n.replace(/\//, '').toUpperCase()) // 替换/以及驼峰大写
  .replace(/-[0-9|a-zA-Z]/g, (n) => n.replace(/-/, '').toUpperCase()) // 替换-以及驼峰大写
  .replace(/_[0-9|a-zA-Z]/g, (n) => n.replace(/_/, '').toUpperCase()) // 替换_以及驼峰大写
 allObject[KeyName] = componentsFiles(key).default || componentsFiles(key)
// 组件懒加载
// allObject[KeyName] = () => (componentsFiles(key).default || componentsFiles(key))
 return allObject
}, {})
console.log(componentsObject)
export default {
    ...
 
    components:componentsObject
 
    ...
}

 匹配的组件：

相关信息：

vueX自动存本地

npm install vuex-persistedstate --save

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate";
import getters from './getters.js'

// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {});

Vue.use(Vuex)

export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "thisVueX", // 浏览器中的名字
    paths: ["user"] // 需要存储起来的参数模块
  })]
})

特殊处理

// import CryptoJS from "crypto-js";
// const KEY1 = "cs2022606storage";
// const IVS1 = 'SpjSm53GXrBCK2XU'
// /**
//  * 
//  * 其他数据加密
//  */
//  export function DecryptAESOther(data) {
//   let dataData=JSON.parse(data)
//   let dataObject={}
//   if(dataData && dataData!=''){
//     Object.keys(dataData).forEach(item=>{
//       dataObject[item]=DecryptAESOther1(dataData[item])
//     })
//     return dataObject;
//   }else{
//     return {}
//   }
 
  
// }

// function DecryptAESOther1(data){
//   if (!data || data.length <= 0) return data;
//   var key = CryptoJS.enc.Utf8.parse(KEY1);
//   var iv = CryptoJS.enc.Utf8.parse(IVS1);
//   var decrypted = CryptoJS.AES.decrypt(data, key, {
//     iv: iv,
//     mode: CryptoJS.mode.CBC
//   });
//   // padding: CryptoJS.pad.Pkcs7
//   let returnData=decrypted.toString(CryptoJS.enc.Utf8).toString()
//   try{
//   	return JSON.parse(returnData);
//   }catch(e){
//   	//TODO handle the exception
// 	return returnData;
//   }
// }
// /**
//  * 
//  * 其他数据解密
//  */
//  export function EncryptAESOther(datas) {
//   let data = JSON.stringify(datas);
//   if (!data || data.length <= 0) return data;
//   var key = CryptoJS.enc.Utf8.parse(KEY1);
//   var iv = CryptoJS.enc.Utf8.parse(IVS1);
//   var encrypted = CryptoJS.AES.encrypt(data, key, {
//     iv: iv,
//     mode: CryptoJS.mode.CBC,
//     padding: CryptoJS.pad.Pkcs7
//   });
//   let jsonStr = encrypted.toString();
//   return jsonStr;
// }




//加解密方法
import {EncryptAESOther,DecryptAESOther} from '@/assets/utils/encrypt'

// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {})


// 方法一：
export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "vueX", // 浏览器中的名字
    // paths: ["user","public"], // 需要存储起来的参数模块，不能与reducer同时存在
    storage:{
      getItem:key=>DecryptAESOther(localStorage.getItem(key)),
      setItem: (key, value) => localStorage.setItem(key, value),
      removeItem: key => localStorage.removeItem(key)
    },
    reducer(value){
      return {
        user:EncryptAESOther(value.user),
        public:EncryptAESOther(value.public),
      }
    },
  })]

// 方法二：
export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "vueX", // 浏览器中的名字
    // paths: ["user","public"], // 需要存储起来的参数模块，不能与reducer同时存在
    storage:{
      getItem:key=>DecryptAESOther1(localStorage.getItem(key)),
      setItem: (key, value) => localStorage.setItem(key, EncryptAESOther(value)),
      removeItem: key => localStorage.removeItem(key)
    }
  })]
})

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

vuex-persistedstate
vuex-persistedstate(github)
 

最后：
也可以通过vuex-persist插件实现，配置基本相同，具体点击查看文档