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

总的来说，在使用的全局属性比较少，或者项目开发中的模块比较少的情况下这样做确实很麻烦，但是在项目很大或者模块很多的时候，这样做无疑有很大的优点。