Vuex之命名空间namespace用法

在store中的用法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const sumInfo = {
  namespaced: true,
  actions: {
    jiaOdd (store, payload) {
      if (store.state.sum % 2) {
        store.commit('JIA', payload)
      }
    },
    WATIEadd (store, payload) {
      setTimeout(() => {
        store.commit('JIA', payload)
      }, 500)
    }
  },
  state: {
    sum: 999,
    school: '北京大学',
    subject: '软件技术'
  },
  mutations: {
    JIA (state, payload) {
      console.log('mutations的方法被调用了。。。', state, payload)
      state.sum += payload
    },
    jian (state, num) {
      state.sum -= num
    }
  },
  getters: {
    maxNum (state) {
      return state.sum * 10
    }
  }
}
const UserInfo = {
  namespaced: true,
  actions: {},
  state: {
    UserList: [{
      id: '001',
      name: '战三'
    }]
  },
  mutations: {
    addUpload (state, payload) {
      state.UserList.unshift(payload)
    },
    delUpload (state, payload) {
      const index = state.UserList.findIndex(item => item.id === payload)
      state.UserList.splice(index, 1)
    }
  },
  getters: {}
}
export default new Vuex.Store({
  modules: {
    sumInfo,
    UserInfo
  }
})

求和组件

<template>
  <div class="count">
    <div>求和：{{ sum }}</div>
    <div>求和放大10倍：{{ maxNum1 }}</div>
    <div>你学的{{ school }}, 你读的{{ subject }}</div>
    <select name="" id="" v-model.number="n">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="sub(n)">-</button>
    <button @click="jiaOdd(n)">奇数加1</button>
    <button @click="WATIEadd(n)">等一等</button>
    <!-- <div>人物的数量: {{ this.$store.UserInfo.state.UserList.length }}</div> -->
     <div>人物的数量: {{ num.length  }}</div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'count',
  data () {
    return {
      n: 1
    }
  },
  computed: {
    // sum () {
    //   return this.$store.state.sum
    // },
    // maxNum () {
    //   return this.$store.getters.maxNum
    // },
    // school () {
    //   return this.$store.state.school
    // },
    // subject () {
    //   return this.$store.state.subject
    // }
    // 写法一
    ...mapState('sumInfo', { sum: 'sum', school: 'school', subject: 'subject' }),
    ...mapState('UserInfo', { num: 'UserList' }),
    // 写法二
    // ...mapState(['sum', 'school', 'subject'])
    // 写法三
    // ...mapState({
    //   sum: state => state.sum,
    //   school: state => state.school,
    //   subject: state => state.subject,
    //   num: state => state.UserList.length
    // }),
    // ...mapGetters(['maxNum'])
    ...mapGetters('sumInfo', { maxNum1: 'maxNum' })
  },
  methods: {
    // add () {
    //   // this.sum += this.n
    //   this.$store.commit('JIA', this.n)
    // },
    // sub () {
    //   // this.sum -= this.n
    //   this.$store.commit('jian', this.n)
    // },
    ...mapMutations('sumInfo', { add: 'JIA', sub: 'jian' }),
    // ...mapActions({ oddAdd: 'jiaOdd', wriote: 'WATIEadd' })
    ...mapActions('sumInfo', ['jiaOdd', 'WATIEadd'])
    // ...mapMutations(['JIA', 'jian']),
    // oddAdd () {
    //   this.$store.dispatch('jiaOdd', this.n)
    // },
    // wriote () {
    //   // setTimeout(() => {
    //   //   this.$store.dispatch('WATIEadd', this.n)
    //   // }, 1000)
    //   this.$store.dispatch('WATIEadd', this.n)
    // }
  },
  mounted () {
    console.log('this ====', this)
  }
}
</script>
<style scoped>
</style>

人物组件

<template>
<div class="Person">
  <h1>人物列表</h1>
  <input type="text" placeholder="请输入你的姓名" v-model="name">
  <button @click="addPerson()">添加人物</button>
  <ul>
    <li v-for="p in UserList" :key="String(p.id)">
      {{p.name}}
      <button @click="delUpload(String(p.id))">删除</button>
    </li>
  </ul>
  <!-- <div>上面的求和是： {{ this.$store.state.sum }}</div> -->
  <!-- <div>上面的求和是： {{ sum1 }}</div> -->
    <div>上面的求和是： {{ sum }}</div>
    <!-- <div>上面的求和是： {{ sum2 }}</div> -->
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Person',
  data () {
    return {
      name: '',
      userInfo: { id: Date.now(), name: this.name }
    }
  },
  computed: {
    // UserList () {
    //   return this.$store.state.UserList
    // }
    // ...mapState({
    //   UserList: state => state.UserList,
    //   sum1: state => state.sum
    // }),
    ...mapState('UserInfo', ['UserList']),
    ...mapState('sumInfo', ['sum'])
    // sum2 () {
    //   return this.$store.UserInfo.sum
    // }
  },
  methods: {
    addPerson () {
      if (this.name) {
        const userInfo = { id: new Date(), name: this.name }
        this.$store.commit('UserInfo/addUpload', userInfo)
        this.name = ''
      }
    },
    // delUpload (id) {
    //   console.log(id)
    //   this.$store.commit('delUpload', id)
    // }
    // ...mapMutations({ delUpload: 'delUpload' })
    ...mapMutations('UserInfo', ['delUpload'])
  }
}
</script>
<style scoped>

</style>