5-5.vuex的modules

1.modules的作用

vuex使用的是单一状态树管理，如果将所有的状态集中在一个对象管理时，当应用复杂时，store对象将会变得很臃肿。modules属性就是让我们能根据需求分割成不同的模块去管理，里面也有state，actions，getters和mutations这些属性

2.modules的写法与其他属性的对比

2-1.state属性

1.不同点

要获取模块里面的数据，需要指定是哪个模块里面 的数据。

2.代码展示

Home.vue页面

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>展示modules里面数据：{{$store.state.a.name}}</p>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
    }
  }
</script>

vuex的index.js页面

import { createStore } from 'vuex'

const moduleA = {
  state: {
    name: 'moduletest'
  },
  getters: {

  },
  mutations: {

  },
  actions: {

  }
}

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    a: moduleA,
  }
})

3.过程分解

2-2.getters属性

1.不同点

与根路径下的getters不同的是，模块下的getters默认带四个参数
state(局部的)，getters,rootState,rootGetters,其中getters和rootGetters都可以获取所有getters(模块和根里面)的方法，所以一般使用的话前三个参数即可满足需求

2.代码展示

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>展示modules里面数据：{{$store.getters.fullname}}</p>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
    }
  }
</script>

vuex的index.js

import { createStore } from 'vuex'

const moduleA = {
  state: {
    name: 'moduletest'
  },
  getters: {
    test1(state) {
      return state.name + 12;
    },
    fullname(state, getters, rootState) {
      return state.name + rootState.count + getters.test1 + getters.test2;
    }
  },
  mutations: {

  },
  actions: {

  }
}
export default createStore({
  state: {
    count: 2
  },
  getters: {
    test2(state) {
      return state.count * 2;
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    a: moduleA,
  }
})

3.过程分解

2-3.mutations属性

1.不同点

此时默认参数state只是局部变量，无法获取根的state里面的数据

2.代码展示

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>展示modules里面数据：{{$store.state.a.name}}</p>
    <button @click='test'>模块修改</button>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
      test() {
        this.$store.commit('updateName');
      }
    }
  }
</script>

vuex里面的index.js

import { createStore } from 'vuex'

const moduleA = {
  state: {
    name: 'moduletest'
  },
  getters: {
  },
  mutations: {
    updateName(state) {
      state.name = 'change'
    }
  },
  actions: {

  }
}
export default createStore({
  state: {
    count: 2
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    a: moduleA,
  }
})

3.代码分解

2-4.actions属性

1.不同点

默认参数context变得比较复杂，不再单单的指store对象。通过他可以获取模块和根里面所要的所有东西。

• context.state:局部的
• context.rootState;根的
• context.Getters:局部的
• context.rootGetters：根的
• dispatch:局部的，如果要访问根的，加一个参数{root:true},示例：dispatch(‘someOtherAction’,
  null, { root: true })，没负载写null
• commit:局部的。如果要访问根的，也是加一个参数{root:true}，示例：commit(‘someMutation’, null,
  { root: true })，没负载写null