mapState 与 mapGetters

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

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

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

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

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

{
    // 手写方法
    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) 的函数

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 文件

<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 文件

// 该文件用于创建 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,
})