vuex模块化使用

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 file
const 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
}