【VUEX】数据持久化处理 vuex-persist

安装 vuex-persist，

安装：yarn add vuex-persist 

使用：import VuexPersistence from 'vuex-persist'

目录结构：

---

1.在index文件中引入getters和VuexPersistence

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import VuexPersistence from 'vuex-persist';

Vue.use(Vuex)

getters：

 

 2. 处理modules

 

const modulesFiles = require.context('./modules', true, /\.js$/)
const path = require('path');
const modules = {};
modulesFiles.keys().forEach((val, idx) => {
  const name = path.basename(val, '.js');
  modules[name] = modulesFiles(val).default
})

 

pageData.js文件

3. 在index文件中抛出Store，添加vuex-persist的调用

const store = new Vuex.Store({
  modules,
  getters,
  strict: false,
  plugins: [vuexSession.plugin]
});

export default store

plugins：

4. 在VUE文件中使用

import { mapGetters } from 'vuex'

 

    computed: {
      ...mapGetters([
        'getComFlag'
      ])
    },

---

 

关于对于数据模块化处理用到的两个方法：

A:     basename

用法：

var path = require('path');

path.basename(要处理的字符，要屏蔽的字符)

B:     require context（）

用法：

接受三个参数（require.context(directory,useSubdirectories,regExp)）

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

返回参数

require.context返回一个require 函数，此函数可以接收一个参数

返回的函数：function webpackContext(req) {return __webpack_require__(webpackContextResolve(req))};

函数有三个属性：resolve 、keys、id

        · resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。

        · keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成

        · id：上下文模块的id

所以本例中modulesFiels()返回结果如下:

---