vuex模块化和命名空间

vuex模块化和命名空间目的：让代码更好的维护，多种数据分类更加明确

修改 store.js

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

<!-- 开启空间命名后，组件读取state中数据 -->
  <!-- 方式一 直接自己读取 -->
  this.$store.state.personAbout.list
  <!-- 方式二 借助mapstate读取 -->
  ...mapState("countAbout",["sum","school"])

 <!-- 开启空间命名后，组件读取getters中数据 -->
  <!-- 方式一 直接自己读取 -->
  this.$store.getters["personAbout/firstPersonName"]
  <!-- 方式二 借助mapgetters读取 -->
  ...mapGetters("countAbout",["bigSUm"])

<!-- 开启空间命名后，组件中调用dispath -->
  <!-- 方式一 直接自己dispach -->
  this.$store.dispath["personAbout/addPersonWang",person]
  <!-- 方式二 借助mapActions -->
    ...mapActions('countAbout',{incrementOdd:'jia0dd',incrementWait;'jiawait'})

<!-- 开启空间命名后，组件中调用commit -->
  <!-- 方式一 直接自己commit -->
  this.$store.commit('personAbout/ADD PERSON',person)
  <!-- 方式二:借助mapMutations: -->
  ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),