vueX 模块封装

时间:2020-07-12
本文章向大家介绍vueX 模块封装,主要包括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

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

$flag 上一页 下一页