模块化和命名空间

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

• 修改store.js

  const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations: { ... },
    actions: { ... },
    getters: {
      bigSum(state){
        return state.sum * 10
      }
    }
  }
  
  const personAbout = {
    namespaced:true,//开启命名空间
    state:{ ... },
    mutations: { ... },
    actions: { ... }
  }
  
  const store = new Vuex.Store({
    modules: {
      countAbout,
      personAbout
    }
  })

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

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

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

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

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

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

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

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