vuex主动引入modlues模块

在vuex模块化开发中。如果多个modules的应用，每次须要import导入有些麻烦。咱们能够应用主动导入的形式。 废话不多间接上干货！

文件夹构造

|- store   |- index.js   //入口文件   |- modules    //文件夹      |- app.js

index.js 入口文件代码

import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// you do not need `import app from './modules/app'`// it will auto require all vuex module from modules fileconst modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {  // set './app.js' => 'app'  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')  const value = modulesFiles(modulePath)  modules[moduleName] = value.default  return modules}, {})export default new Vuex.Store({  getters,  modules})

app.js 编写形式

const state = {}const mutations = { }const actions = {  }export default {  namespaced: true,  state,  mutations,  actions}

此时退出一个新需要，开发过程中vuex数据刷新就会重置，所以有些数据咱们是缓存在浏览器。 那咱们怎么将浏览器的缓存主动导入在vuex中呢？

导入浏览器缓存数据

咱们新建一个缓存文件命名cache.js。代码如下

const state = {    CACHE: null,}/*从本地存储读取数据*/for (var item in state) {    localStorage.getItem(item)        ? (state[item] = JSON.parse(localStorage.getItem(item) || ''))        : false;}export default {    state}