mapState 与 mapGetters

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

?

1 2 3 4

computed: {    ...mapState({sum: 'sum', school: 'school'}),    ...mapState(['sum', 'school']), }

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

?

1 2 3 4

computed: {     ...mapGetters({bigSum: 'bigSum'}),     ...mapGetters(['bigSum']), }

3. mapActions方法：用于生成与 actions 对话的方法，即：包含 $store.dispatch(xx) 的函数methods: 

?

1 2 3 4 5 6 7 8 9 10 11 12

{     // 手写方法     incrementOdd(value) { 　    this.$store.dispatch('jiaOdd', value) 　  }       // 靠 mapActions 生成， incrementOdd、incrementWait（对象形式）     ...mapActions({incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})   　　// 靠 mapActions 生成， incrementOdd、incrementWait（数组形式） 　　...mapActions(['jiaOdd','jiaWait']) }

4. mapMutations 方法：用于生成与 mutations 对话的方法，即：包含 $store.commit(xx) 的函数

?

1 2 3 4 5 6 7 8 9 10 11 12

methods: { 　　// 手写方法 　　increment(value) { 　　　　this.$store.commit('JIA', value) 　　}       // 靠 mapMutations 生成， increment、decrement（对象形式） 　　...mapMutations({increment: 'JIA', decrement: 'JIAN'})   　　// 靠 mapMutations  生成， increment、decrement（数组形式） 　　...mapMutations(['JIA','JIAN']) }

备注： mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象 mouseEvent。

Count.vue 文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

<template>     <div>         <h1>当前求和为：{{sum}}</h1>         <h1>当前求和放大十倍为：{{bigSum}}</h1>         <h1>我在{{school}}，学习{{subject}}</h1>         <select v-model.number="n">             <option value="1">1</option>             <option value="2">2</option>             <option value="3">3</option>         </select>         <button @click="increment">+</button>         <button @click="decrement">-</button>         <button @click="incrementOdd">当前求和为奇数再加</button>         <button @click="incrementWait">等一等再加</button>     </div> </template> <script> import { mapState, mapGetters } from 'vuex' export default {     name: 'Count',     data() {         return {             n:1, // 用户选择的数字         }     },     computed: {         // 1. 亲自写计算属性         // sum() {         //     return this.$store.state.sum         // },         // school() {         //     return this.$store.state.school         // },         // subject() {         //     return this.$store.state.subject         // }           // 2. 借助 mapState 生成计算属性，从 state 中读取数据 （对象写法）         // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),           // 3. 借助 mapState 生成计算属性，从 state 中读取数据 （数组写法）         ...mapState(['sum', 'school', 'subject']),           // 1. 自己写计算属性         // bigSum() {         //     return this.$store.getters.bigSum         // },           // 2. 借助 mapGetters 生成计算属性，从 getters 中读取数据 （对象写法）         // ...mapGetters({bigSum: 'bigSum'}),           // 3. 借助 mapGetters 生成计算属性，从 getters 中读取数据 （数组写法）         ...mapGetters(['bigSum']),     },     methods: {         increment() {             this.$store.commit('ADD', this.n) // commit 直接和 mutations 对话，操作数据         },         decrement() {             this.$store.commit('DECREMENT', this.n)         },         incrementOdd() {             this.$store.dispatch('addOdd', this.n) // dispatch 和 actions 对话         },         incrementWait() {             this.$store.dispatch('addWait', this.n)         }     },     mounted() {         console.log(mapState({sum: 'sum', bigSum: 'bigSum', school: 'school', subject: 'subject'}))     } } </script>

index.js 文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

// 该文件用于创建 vuex 中最为核心的 store import Vue from 'vue' // 引入 vuex import Vuex from 'vuex' Vue.use(Vuex) // 准备 actions —— 用于响应组件中的动作 const actions = {     addOdd(context, value) {         if (context.state.sum % 2) {             context.commit('ADD', value)         }     },     addWait(context, value) {         setTimeout(() => {             context.commit('ADD', value)         }, 500)     } } // 准备 mutations —— 用于操作数据（state） const mutations = {     ADD(state, value) {         state.sum += value     },     DECREMENT(state, value) {         state.sum -= value     }, } // 准备 state —— 用于存储数据 const state = {     sum: 0, // 当前的和     school: 'xxx学校',     subject: '英语', } // 准备 getters —— 用于将 state 中的数据进行加工 const getters = {     bigSum(state) {         return state.sum * 10     } }   export default new Vuex.Store({     actions,     mutations,     state,     getters, })