閒下來的週末真的無聊，早上五點半睡不著了，在B站逛了一圈之後六點過二十分鐘。記錄一下公司專案中涉及到的vueX裡面全域性屬性模組化封裝吧。

說到這個封裝，我也不太清楚是不是公司裡面前端大佬自己寫的還是element-admin中自帶的。先看一個例子吧：

首先在store目錄下新建modules層用來儲存每個模組的全域性屬性（這裡只建立一個user模組，目錄結構如下）：

user.js

const state = {
  user: {},
  login: false
}

const mutations = {
  userInfo: (state, user) => {
    state.user = user
  },
  userLogin: (state, isLogin) => {
    state.login = isLogin
  }
}

export default {
  namespaced: true,
  state,
  mutations
}
 

之後在 store 下面來建立 getters.js 匹配 modules 下面的所有屬性：

const getters = {
  user: state => state.user.user,
  hasLogin: state => state.user.login
}
export default getters

最後在 index.js 資料夾下面，引入 getters.js 中的屬性以及 modules 下面全域性屬性模組

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

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
}, {})
console.log(modules)

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

export default store
 

最後我們在一個頁面進行測試

<template>
  <div class="wrapper">
    <div>
      <button @click="btn_user">使用者</button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  components: {},
  props: {},
  data () {
    return {
    }
  }
  computed: mapState({
    User: state => state.user.user,
    Login: state => state.user.login
  }),
  methods: {
    ...mapMutations('user', ['userInfo', 'userLogin']),
    btn_user () {
      this.userInfo('buding')
      this.userLogin(true)
      console.log(this.$store)
    }
  }
}
</script>
 

最後看一下結果：

這是在 index.js中列印的modules

這是列印的this.$store

總的來說，在使用的全域性屬性比較少，或者專案開發中的模組比較少的情況下這樣做確實很麻煩，但是在專案很大或者模組很多的時候，這樣做無疑有很大的優點。