首页 > 其他分享 >mapState 与 mapGetters

mapState 与 mapGetters

时间:2023-06-01 18:55:40浏览次数:37  
标签:... school sum mapState state mapGetters bigSum store

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

 

 

标签:...,school,sum,mapState,state,mapGetters,bigSum,store
From: https://www.cnblogs.com/beyondzw/p/17449935.html

相关文章