为什么要进行模块分割

如果我们的状态管理只写在一个state、一个getters、一个mutations....那么会不便于阅读维护、扩展性也不好，因此可以分割多个模块，每个模块都有state、getters、mutations、actions，然后在store的根文件index.js中进行合并

使用方式

定义

页面中使用

模块使用辅助函数

<template>
  <div>about页面 {{ msg }}</div>
  <div>计算属性：{{  upperMsg }}</div>
  <button @click="changeMsg('hi')">修改hello</button>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
  name: 'AboutView',
  computed: {
    ...mapState('message', ['msg']),
    ...mapGetters('message', ['upperMsg'])
  },
  methods: {
    // handleClck(){
    //   this.$store.commit('message/changeMsg', 'hi')
    // }
    ...mapMutations('message', ['changeMsg'])
  }
}
</script>
<style lang="scss"></style>