关于vuex: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}