模块化+命名空间

1.目的：为了让代码更好维护，让多种数据分类更加明确

2.修改src/store/index.js为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter actions mutations state，需要加上所属的模块名

const countAbout={
    namespaced:true,//开启命名空间
    actions:{},
    mutations:{},
    state:{},
    getters:{},
}
const personAbout={
    namespaced:true,//开启命名空间
    actions:{},
    mutations:{},
    state:{},
    getters:{},
}

// 暴露/导出store
export default new Vuex.Store({
    modules:[
        countAbout,
        personAbout
    ]
})

3.开启命名空间后，组件中读取state数据

//方式一：自己直接读取
this.$store.personAbout.list
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject']

4.开启命名空间后，组件中读取getters数据

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6.开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

src/store/index.js

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import countOptions from './count'
import personOptions from './person'

// 暴露/导出store
export default new Vuex.Store({
    modules: {
        countAbout:countOptions,
        personAbout:personOptions
    }
})

src/store/count.js

export default {
    namespaced: true,//开启命名空间
    actions: {
        // context相当于精简版的$store
        jiaOdd(context, value) {
            console.log('actions中的jiaOdd被调用了');
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            console.log('actions中的jiaWait被调用了');
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    },
    mutations: {
        JIA(state, value) {
            console.log('mutations中的JIA被调用了');
            state.sum += value
        },
        JIAN(state, value) {
            console.log('mutations中的JIAN被调用了');
            state.sum -= value
        }
    },
    state: {
        sum: 0,   //当前的和
        school: '黑马',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    },
}

src/store/person.js

import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced: true,//开启命名空间
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context) {
            axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了');
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [{
            id:'001',
            name:'张三'
        }]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    },
}

src/components/Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h4 style="color:red">Person组件总人数为:{{ personList.length }}</h4>
    <h1>当前求和放大10倍为：{{ bigSum }}</h1>
    <h1>我在{{ school }}，学习{{ subject }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1     //用户选择的数字
    }
  },
  computed:{
    ...mapState('countAbout',['sum','school','subject']),
    ...mapState('personAbout',['personList']),
    ...mapGetters('countAbout',['bigSum'])
  },
  methods: {
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  }
}
</script>

<style>
button {
  margin-left: 5px;
}
</style>

src/components/Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h4 style="color: red;">Count组件求和为：{{ sum }}</h4>
    <h4>列表中第一个人的名字是：{{firstPersonName}}</h4>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPerson">随机添加一个人</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList
    },
    sum() {
      return this.$store.state.countAbout.sum
    },
    firstPersonName(){
      return this.$store.getters['personAbout/firstPersonName']
    }
  },
  methods: {
    add() {
      if (this.name === '') return
      const personObj = { id: nanoid(), name: this.name }
      // console.log(personObj)
      this.$store.commit('personAbout/ADD_PERSON', personObj)
      this.name = ''
    },
    addWang(){
      if (this.name === '') return
      const personObj = { id: nanoid(), name: this.name }
      // console.log(personObj)
      this.$store.dispatch('personAbout/addPersonWang', personObj)
      this.name = ''
    },
    addPerson(){
      this.$store.dispatch('personAbout/addPersonServer')
    }
  }
}
</script>

src/App.vue

<template>
    <div>
        <Count/>
        <hr>
        <Person/>
    </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
    name: 'App',
    components: { Count,Person },

}
</script>

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'

import store from './store'
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus=this //安装全局事件总线
    }
})