Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间

# 一、四个map方法的使用
#    1.mapState方法：用于帮助我们映射state中的数据为计算属性
    computed:{
        // sum(){
        //     return this.$store.state.sum;
        // },
        // 借助mapState生成计算数据     对象写法
        ...mapState({sum: 'sum'}),  // 代替上面的sum() 
        // 借助mapState生成计算数据     数组写法
        ...mapState(['sum']),       // 代替上面的sum() 
        },
#    2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
    computed:{
        // bigSum(){
        //     return this.$store.getters.bigSum;
        // },
        // 借助mapState生成计算属性               对象写法
        ...mapGetters({bigSum: 'bigSum'}),    // 代替上面的bigSum()
        // 借助mapState生成计算属性               数组写法
        ...mapGetters(['bigSum']),          // 代替上面的bigSum()
        },
#    3.mapActions方法：用于帮助我们生成actions对话中的方法
    methods:{
        // invrementOdd(){
        //     this.$store.dispatch('jiaOdd', this.n);
        // },
        // invrementWait(){
        //     this.$store.dispatch('jiaWait', this.n);
        // },
        // 靠mapActions生成，代替  invrementOdd  invrementWait函数   对象写法
        ...mapActions({invrementOdd: 'jiaOdd', invrementWait: 'jiaWait'})  
        // 靠mapActions生成，代替  invrementOdd  invrementWait函数   数组写法
        ...mapActions(['jiaOdd', 'jiaWait'])   
        },
#    4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
    methods:{
        // invrement(){
        //     // console.log('@', this);
        //     this.$store.commit('JIA', this.n);
        // },
        // decrement(){
        //     this.$store.commit('JIAN', this.n);
        // },
        // 靠mapMutations生成，代替invrement   decrement   对象形式
        ...mapMutations({invrement:'JIA', decrement: 'JIAN'}),  
        // 靠mapMutations生成，代替invrement   decrement   数组简写
        ...mapMutations(['JIA', 'JIAN'])
        },
#    5.备注：mapActions与Mutations使用时，若要传递参数，需要在模板中绑定事件时传递好参数，否则会默认传一个事件对象。


# 二、模块化+命名空间
#    1.目的：让代码更好维护，让更多种数据分类更加明确。
#    2.修改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({
      models:{
        countAbout,
        personAbout
      }
    })
#    3.开启命名空间后，组件中读取state数据：
      方式一：自己直接读取
      this.$stroe.state.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'})