[JavaScript知识库]【Vue | 补洞 | 03】Vuex 模块化编码

本文中的部分示例需有前两文的阅读基础，还没读过的同学先复习一下噢，直达链接：

【Vue | 补洞 | 01】Vuex 环境搭建及基本使用

【Vue | 补洞 | 02】mapState 一行代码获取 vuex 所有数据

??vuex 通过 namespaced 进行模块化编程！在大型项目中，把所有的数据都堆放在一个仓库里总不是好事；好在这个仓库里提供了一些 收纳盒，每个收纳盒存放独立的数据和逻辑，代码干净，方便维护！
??欢迎持续关注新系列文章 [Vue 补洞] 系列，用久了 Vue2 总有一些遗漏的知识点，通过该系列文章一起查漏补缺！

1、目的

• 拆解模块，便于维护
• 不同模块之间，命名不会互相冲突
  
  

2、修改 store/index.js

将 store/index.js 修改成如下示例

• 在 vuex 构造函数中，用 modules 去接收相关模块
• 相关模块 应声明命名空间，用于调用时指明要操作的模块

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

// 人员相关
const personAbout = {
  namespaced: 'personAbout',
  state: { ... },
  actions: { ... },
  mutations: { ... },
  getters: { ... },
}
              
// 科目相关
const projectAbout = {
  // namespaced 命名空间
  namespaced: 'projectAbout',
  state: { ... },
  actions: { ... },
  mutations: { ... },
  getters: { ... },
}

export default new Vuex.Store({
  modules: {
    personAbout,
    projectAbout,
  },
})

3、state 写法

1. 声明

// store/index.js
...
const personAbout = {
  namespaced: 'personAbout',
  state: {
    userName: 'Jokerls',
    age: 18,
    address: '潮州'
  }
  ...
}

2. 使用（基础写法）

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    userName () {
      return this.$store.state.personAbout.userName
    },
    age () {
      return this.$store.state.personAbout.age
    },
    address () {
      return this.$store.state.personAbout.address
    }
  }
}
</script>

3. 使用（mapState 写法）

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    // 1.对象写法
    ...mapState('personAbout', {
      userName: 'userName',
      age: 'age',
      address: 'address',
    })

    // 2.数组写法
    // ...mapState('personAbout', ['userName', 'age', 'address'])
  }
}
</script>

4、actions 写法

假设 actions 处理一个逻辑：点击按钮，age 为 25岁前可加1，之后就不允许加

1. 声明

// 人员相关
const personAbout = {
  namespaced: 'personAbout',
  actions: {
    addAgeBefore25(context, value) {
      if (value < 25) {
        context.commit('ADD_AGE', value)
      }
    },
  },
  mutations: {
    ADD_AGE(state) {
      state.age += 1
    },
  }
}

2. 使用（基础写法）

   注意：需通过 personAbout/addAgeBefore25 去指定哪个调用哪个命名空间下的 actions

<template>
  <div>
    <button @click="addAge">添加年龄</button>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address'])
  },
  methods: {
    addAge () {
      this.$store.dispatch('personAbout/addAgeBefore25', this.age)
    }
  }
}
</script>

3. 使用（mapMutations 写法）

<template>
  <div>
    <button @click="addAgeBefore25(age)">添加年龄</button>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address'])
  },
  methods: {
    // 1.对象写法
    ...mapActions('personAbout', { addAgeBefore25: 'addAgeBefore25' })

    // 2.数组写法
    // ...mapActions('personAbout', ['addAgeBefore25'])
  }
}
</script>

5、mutations 写法

1. 声明

// 人员相关
const personAbout = {
  namespaced: 'personAbout',
  ...
  mutations: {
    ADD_AGE(state, value) {
      state.age += 1
    },
  }
  ...
}

2. 使用（基础写法）

<template>
  <div>
    <button @click="addAggWithCommit">添加年龄</button>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address'])
  },
  methods: {
    addAggWithCommit () {
      this.$store.commit('personAbout/ADD_AGE', this.age)
    }
  }
}
</script>

3. 使用（mapActions 写法）

<template>
  <div>
    <button @click="ADD_AGE(age)">添加年龄</button>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address'])
  },
  methods: {
    // 1.对象写法
    ...mapMutations('personAbout', { ADD_AGE: 'ADD_AGE' })
      
    // 2.数组写法
    // ...mapMutations('personAbout', ['ADD_AGE'])
  }
}
</script>

6、getters 写法

假设用 getters 实现将用户名名称拼为：Jokerls乐乐

1. 声明

// 人员相关
const personAbout = {
  namespaced: 'personAbout',
  ...
  state: {
    userName: 'Jokerls',
    age: 18,
    address: '潮州',
  },
  getters: {
    userFullName(state) {
      return state.userName + '乐乐'
    },
  }
  ...
}

2. 使用（基础写法）

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>用户全名：{{ userFullName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address']),
      
    userFullName () {
      return this.$store.getters['personAbout/userFullName']
    }
  }
}
</script>

3. 使用（mapGetters 写法）

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>用户全名：{{ userFullName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('personAbout', ['userName', 'age', 'address']),
      
    // 1.对象写法
    ...mapGetters('personAbout', { userFullName: 'userFullName' })

    // 2.数组写法
    // ...mapGetters('personAbout', ['userFullName'])
  }
}
</script>

7、总结

• 在 store/index.js 中，使用 modules 做模块化编码
• 使用时，如果是基础写法，需要通过如 personAbout/xxx 才能读取到对应的命名空间下的值或方法
• 如果是使用 mapXxxx 写法，则需在 第一个参数 配置命名空间的值，如 mapXxxx('personAbout', [])