【Vue | 补洞 | 03】Vuex 模块化编码_projectname(){ return this.$store.getters.config.p-CSDN博客

本文链接：https://blog.csdn.net/weixin_42678675/article/details/123324142

本文详细介绍了如何在Vuex中通过命名空间实现模块化编程，包括如何在store中设置模块、使用state、actions、mutations和getters，并提供了基础写法和mapXxxx方法的实例。

摘要由CSDN通过智能技术生成

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

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

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

实现组件间通信的另外两种方式，建议阅读！
【Vue | 补洞 | 04】全局事件总线
 【Vue | 补洞 | 05】消息订阅与发布

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 写法

声明

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

使用（基础写法）

<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>

使用（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，之后就不允许加

声明

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

使用（基础写法）

注意：需通过 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>

使用（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 写法

声明

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

使用（基础写法）

<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>

使用（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乐乐

声明

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

使用（基础写法）

<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>

使用（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>