無星的前端之旅（十三）——require.context和vuex持久化

背景

有些component須要全局註冊的，可是在main.js中全局註冊又太麻煩了。

store採用modules方式分包，使用的時候也要手動註冊。

store刷新丟失，須要持久化。

這時候解決前兩個問題，能夠使用require.context

解決最後一個問題能夠使用vuex-persistedstate

require.context

1.require.context是什麼？

Vue內置了webpack的部分配置，這個我們就很少說了。

require.context是webpack的api。

2.require.context能幹什麼？

經過執行require.context()函數能夠獲取一個特定的上下文，主要用來實現自動化導入模塊。

它容許您傳遞要搜索的目錄，指示是否也應搜索子目錄的標誌以及用於匹配文件的正則表達式，而後自動導入，使得不須要每次顯式的調用import導入模塊。

require.context()在構建時，webpack在代碼中進行解析。

全局自動註冊component

新建一個放置全局組件的文件夾，例如：components

在components文件夾下新建一個js文件，例如：autoRegister.js

vue2版本：

// /components/autoRegister.js

import Vue from 'vue';

const componentsContext = require.context('./', true, /index.(vue|js)$/);
componentsContext.keys().forEach((fileName) => {
  // 獲取文件中的 default 模塊
  const componentConfig = componentsContext(fileName).default;
  if (/.vue$/.test(fileName)) {
    console.log(componentConfig.name);
    Vue.component(componentConfig.name, componentConfig);
  } else {
    Vue.use(componentConfig);
  }
});

複製代碼

vue3版本：

// /components/autoRegister.js

const autoRegister = (app) => {
  const componentsContext = require.context('./', true, /index.(vue|js)$/);
  componentsContext.keys().forEach((fileName) => {
    // 獲取文件中的 default 模塊
    const componentConfig = componentsContext(fileName).default;
    if (/.vue$/.test(fileName)) {
      console.log(componentConfig.name);
      app.component(componentConfig.name, componentConfig);
    } else {
      app.use(componentConfig);
    }
  });
};
export default autoRegister;

複製代碼

main.js中調用

// vue2,是的，只須要引入就好了，由於js會默認執行
import '@/components/autoRegister';

// vue3
import autoRegister from './components/autoRegister';
autoRegister(app);
複製代碼

自動分module註冊store

咱們在store文件夾下新建一個index.js和一個modules文件夾

vue2:

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

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

export default store
複製代碼

vue3:

import { createStore } from 'vuex';

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = createStore({
  modules,
  strict: process.env.NODE_ENV !== 'production',
});
export default store;

複製代碼

關於分包的store，舉個例子

// /store/modules/exampleStore.js

const state = {
};

const actions = {
  
};

const mutations = {

};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

複製代碼

使用

store.state.exampleStore.xxx
複製代碼

vuex持久化

持久化用vuex-persistedstate，這沒有什麼好說的了，用法看文檔。

這裏要說的是配合require.context，如何讓每一個store里加上持久化

在導出的時候咱們能夠看到，其實導出了一堆屬性，最後都是經過

modules[moduleName] = value.default

的方式注入

那咱們是否能夠多導出一個屬性，經過一些方式，讓指定屬性用於本地持久化呢？

答案是：能夠

咱們對上面的東西稍做演化

1.修改modules中的模塊導出

export default {              export default {  
  namespaced: true,             namespaced: true,
  state,                =>      state,
  mutations,                    mutations,
  actions,                      actions,
};                              localStorage: ['name'],//假設state中須要持久化的key爲name
                              }
複製代碼

2.在自動倒入中稍加判斷是否存在localStorage

vue2:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);
const modules = {};
const modulePluginPaths = [];
const requireModule = require.context('./modules', false, /.js$/);
requireModule.keys().forEach((fileName) => {
  modules[fileName.slice(2, -3)] = requireModule(fileName).default;
  // 若是存在且大於0
  if (requireModule(fileName).default.localStorage?.length > 0) {
    requireModule(fileName).default.localStorage.forEach((item) => {
      modulePluginPaths.push(`${fileName.slice(2, -3)}.${item}`);
    });
  }
});

const store = new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production',
  plugins: [
    createPersistedState({
      paths: modulePluginPaths,
    }),
  ],
});

export default store;

複製代碼

vue3:

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const modules = {};
const modulePluginPaths = [];
const requireModule = require.context('./modules', false, /.js$/);
requireModule.keys().forEach((fileName) => {
  modules[fileName.slice(2, -3)] = requireModule(fileName).default;
  // 若是存在且大於0
  if (requireModule(fileName).default.localStorage?.length > 0) {
    requireModule(fileName).default.localStorage.forEach((item) => {
      modulePluginPaths.push(`${fileName.slice(2, -3)}.${item}`);
    });
  }
});

const store = createStore({
  modules,
  strict: process.env.NODE_ENV !== 'production',
  plugins: [
    createPersistedState({
      paths: modulePluginPaths,
      // storage: window.sessionStorage,
    }),
  ],
});

export default store;

複製代碼

這樣不管怎麼刷新，你須要持久化的內容，都被存到了localstorage中，使用起來方便無感

以上內容，配合plop模板建立使用更加，請見

無星的前端之旅（十四）——巧用plop生成模板進行偷懶