vueX 模塊封裝

閑下來的周末真的無聊，早上五點半睡不着了，在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

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