mapState 与 mapGetters

 

 

- 四个map 方法的使用：

    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, })