xuex module 的简单用法

什么是module？

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

module 的简单应用

最近在用vue-admin-element开发一个后台管理系统 算是真正意义上的接触了vuex 看了人家的代码 才知道自己多么的井底之蛙 好了废话不多说了

目录结构

user.js

const user = {
  state: {
    user: '',
    status: '',
    code: '',
    token: getToken(),
    name: '',
    avatar: '',
    introduction: '',
    roles: [],
    setting: {
      articlePlatform: []
    },
    content:'我想测试一下，我能拿到modules下 state里面的值吗'
  },

  mutations: {

  },

  actions: {

  }
}

export default user//导出user

index.js

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


Vue.use(Vuex)
// 精简版的写法不用每次都引入模块
//获取 上级目录modules的 所有后缀名为 .js的文件
const modulesFiles = require.context('./modules', true, /\.js$/)
console.log(modulesFiles)
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,
  getters
})




export default store

index.vue

<template>
  <div class="parent">
    <h1>获取的module里面state的值{{content}}</h1>
  </div>
</template>
<script>
  import {mapActions , mapMutations , mapState ,mapGetters} from 'vuex'
  export default{
     name:"parent",
    data(){
      return {

      }
      
    },
    mounted(){
        console.log(this.content)
    },
    methods:{
        
    },
    computed:{
        //拿到vuex里面的 state里面的值 这是辅助函数的强大之处 由于每个模块之间 都是单独的，所以获取值加上模块的名字才能拿到state的值
        ...mapState({
            content: state => state.user.content,
        })
    }
  }
</script>

<style scoped>
    
</style>

一开始 获取state里面的值 总是获取不到 因为以前都是一个state 直接通过state.健名就能拿到 但是加上module之后就 必须加上 文件名不然state的值就获取不到了 如user下面state里面的content 获取的时候 就是 state=>state.user.content 直接用state.content是取不到的