xuex module 的简单用法

什么是module？

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

module 的简单应用

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

目录结构

user.js

 1 const user = {
 2   state: {
 3     user: '',
 4     status: '',
 5     code: '',
 6     token: getToken(),
 7     name: '',
 8     avatar: '',
 9     introduction: '',
10     roles: [],
11     setting: {
12       articlePlatform: []
13     },
14     content:'我想测试一下，我能拿到modules下 state里面的值吗'
15   },
16 
17   mutations: {
18 
19   },
20 
21   actions: {
22 
23   }
24 }
25 
26 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是取不到的