Vue之数据共享vuex高级部分(getters计算属性、mapState和mapGetters计算属性、mapMutations和mapActions生成函数、模块化命名空间)

1. getters计算属性

当state中的数据需要经过加工后再使用时，可以使用getters加工

1. src/store/index.js如下所示。相当于bigSum属性等于state的sum的10倍

......省略部分......

// 用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    ......省略部分......
    getters
})

2. components/Count.vue如下所示。使用$store.getters.bigSum获取getters计算属性的值

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h1>当前求和放大10倍为：{{$store.getters.bigSum}}</h1>
        ......省略部分......
	</div>
</template>
......省略部分......

3. 效果如下所示：
   

2. mapState和mapGetters计算属性

• mapState方法：用于映射state中的数据为computed的计算属性

  • 也可以自己亲自去写计算属性。这样可以实现很多的复杂逻辑
  • 对象写法：借助mapState生成计算属性。其实就是对state的属性换个名称再使用。... 可以将对象打平为computed里面的多个属性
  • 数组写法：如果计算属性和state的属性名一样，可以简写
  • 输出的mapState如下。其实也是一个函数
    

• mapGetters方法：用于映射getters中的数据为computed的计算属性

使用如下：

<template>
	<div>
		<h1>当前求和为：{{mySum}}</h1>
		<h1>当前求和放大10倍为：{{myBigSum}}</h1>
	    ......省略部分......
	</div>
</template>

<script>
  import {mapState,mapGetters} from 'vuex'

  export default {
    ......省略部分......
    
    computed: {
      // ==============state======================
      // 方式一: 自己亲自去写计算属性。在这里可以实现很多的复杂逻辑
      /* mySum(){
        return this.$store.state.sum
      }, */


      // 方式二: 对象写法。借助mapState生成计算属性。其实就是对state的属性换个名称再使用
      // ... 可以将对象打平为computed里面的多个属性
      ...mapState({mySum:'sum'}),

      // 方式三: 数组写法。如果计算属性和state的属性名一样，可以简写
      // ...mapState(['sum']),


      // ==============getter======================
      /* myBigSum(){
        return this.$store.getters.bigSum
      }, */

      ...mapGetters({myBigSum:'bigSum'}),

      // ...mapGetters(['bigSum'])

    },
    
    ......省略部分......
    
    mounted() {
      const tmpMap = mapState({mySum:'sum'})
      console.log(tmpMap)
    }
  }
</script>

3. mapMutations和mapActions生成函数

• mapMutations方法：用于生成与mutations对话的函数，即：包含$store.commit的函数
  • 也可以自己亲自去写函数。这样可以实现很多的复杂逻辑
  • 对象写法：借助mapMutations生成函数。如果生成的函数不传递参数，参数默认是事件对象
  • 数组写法：如果函数名和mutations中的函数名一样，可以简写
• mapActions方法：用于生成与actions对话的函数，即：包含$store.dispatch的函数

使用如下：

<template>
	<div>
        ......省略部分......
        <!-- 如果这里不传递参数，参数默认是事件对象 -->
		<button @click="clickAdd(n)">+</button>
		<button @click="clickAddWhenOdd(n)">和为奇数时点我才会加</button>
	</div>
</template>

<script>
  ......省略部分......
  import {mapActions, mapMutations} from 'vuex'

	export default {
        ......省略部分......
		methods: {
      // ==============commit======================
      // 方式一: 自己亲自去实现函数，在函数里面进行commit。在这里可以实现很多的复杂逻辑
      /* clickAdd(){
				this.$store.commit('ADD',this.n)
			}, */

      // 方式二: 对象写法。借助mapMutations生成函数
      ...mapMutations({clickAdd:'ADD'}),

      // 方式三: 数组写法。如果函数名和mutations中的函数名一样，可以简写
      // ...mapMutations(['ADD']),

      // ==============dispatch======================
      /* clickAddWhenOdd(){
				this.$store.dispatch('addOdd',this.n)
			}, */

      ...mapActions({clickAddWhenOdd:'addOdd'}),

      //...mapActions(['addOdd'])

		},
        ......省略部分......
</script>
......省略部分......

4. 模块化命名空间

将多种不同类的数据进行分类，让代码更好维护

src/store/index.js如下所示。

• 需要使用namespaced: true开启命名空间，mapState才能识别命名空间
• 使用modules管理多个module，module的属性名用于在其它vue模块进行引用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const countOptions = {
    namespaced: true, // 需要开启命名空间。mapState才能识别命名空间

    actions: {
        addOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('ADD', value)
            }
        },
        // 使用backend API请求参数值
        addBackend(context) {
            // 不用传入参数值，假设这里发送了axios的get请求，获取到response.data
            const fackResponseData = 88
            context.commit('ADD', fackResponseData)
        }
    },

    mutations: {
        ADD(state, value) {
            state.sum += value
        }
    },

    state: {
        sum: 0
    },

    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

export default new Vuex.Store({
    // 将不同的功能，放在不同的模块，方便管理
    modules: {
        countModule: countOptions
    }
})

Count.vue如下所示：

• state引用方式
  • 直接读取: this.$store.state.countModule.sum
  • 使用mapState读取: mapState('countModule', {mySum: 'sum'})
• getters引用方式
  • 直接读取: this.$store.getters['countModule/bigSum']
  • 使用mapGetters读取: mapGetters('countModule', {myBigSum: 'bigSum'})
    …mapGetters(‘countAbout’,[‘bigSum’])
• 调用commit
  • 直接commit: this.$store.commit('countModule/ADD',this.n)
  • 使用mapMutations: mapMutations('countModule', {clickAdd: 'ADD'})
• 调用dispatch
  • 直接dispatch: this.$store.dispatch('countModule/addOdd',this.n)
  • 使用mapActions: mapActions('countModule', {clickAddWhenOdd: 'addOdd'})

<template>
  <div>
    <h1>当前求和为：{{ mySum }}</h1>
    <h1>当前求和放大10倍为：{{ myBigSum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button @click="clickAdd(n)">+</button>
    <button @click="clickAddWhenOdd(n)">和为奇数时点我才会加</button>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1,
    }
  },
  computed: {
    // ==============state======================
    // 方式一: 自己亲自去写计算属性
    /* mySum(){
      return this.$store.state.countModule.sum
    }, */


    // 方式二: 对象写法
    ...mapState('countModule', {mySum: 'sum'}),

    // 方式三: 数组写法
    // ...mapState('countModule', ['sum']),


    // ==============getter======================
    /* myBigSum(){
      return this.$store.getters['countModule/bigSum']
    }, */

    ...mapGetters('countModule', {myBigSum: 'bigSum'}),

    // ...mapGetters('countModule', ['bigSum'])

  },
  methods: {
    // ==============commit======================
    // 方式一: 自己亲自去实现函数
    /* clickAdd(){
      this.$store.commit('countModule/ADD',this.n)
    }, */

    // 方式二: 对象写法
    ...mapMutations('countModule', {clickAdd: 'ADD'}),

    // 方式三: 数组写法
    // ...mapMutations('countModule', ['ADD']),

    // ==============dispatch======================
    /* clickAddWhenOdd(){
      this.$store.dispatch('countModule/addOdd',this.n)
    }, */

    ...mapActions('countModule', {clickAddWhenOdd: 'addOdd'}),

    // ...mapActions('countModule', ['addOdd'])

  }
}
</script>

<style lang="css">
button {
  margin-left: 5px;
}
</style>