mapState mapGetters

HeX_7

已于 2022-06-23 18:48:04 修改

阅读量612

点赞数

分类专栏： # Vue 文章标签：前端 javascript

于 2022-06-23 12:51:48 首次发布

本文链接：https://blog.csdn.net/hex_7/article/details/125424973

版权

这篇博客介绍了Vuex中用于管理状态的四个辅助函数：mapState用于将state数据映射为计算属性，mapGetters用于映射getters数据，mapActions帮助创建与actions交互的方法，而mapMutations则用于生成与mutations交互的函数。在使用mapActions和mapMutations时，如果需要传递参数，需在模板中绑定事件并传递。

摘要由CSDN通过智能技术生成

1. mapState方法:用于帮助我们映射state中的数据为计算属性

computed:

//借助mapState生成计算属性: sum、 school、 subject (对象写法)

        ... mapState({sum: 'sum' ,school: 'school' ,subject:'subject'}),

        //借助mapState生成计算属性: sum、 school、 subject (数组写法)

        ...mapState(['sum' ,' school','subject']),

        },

2. mapGetters方法: 用于帮助我们映射getters中的数据为计算属性

computed:

//借助mapGetters生成计算属性: bigSum (对象写法)

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

        //借助mapGetters生成计算属性: bigSum (数组写法)

        ... mapGetters(['bigSum' ])

        },

index.js

// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
//引入Vuex 
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作
const actions = {
    /* jia:function(context,value){
        console.log('actions中的jia被调用',context,value);
        context.commit('JIA',value)
    },
    jian:function(context,value){
        console.log('actions中的jian被调用',context,value);
        context.commit('JIAN',value)
    }, */
    jiaOdd:function(context,value){
        console.log('actions中的jiaOdd被调用',context,value);
        if (context.state.sum % 2) {
            context.commit('JIA',value)
        }
    },
    jiaWait:function(context,value){
        console.log('actions中的jiaWait被调用',context,value);
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    },
}
// 准备mutations--用于操作数据（state）
const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value);
        state.sum += value
    },
    JIAN(state,value){
        // console.log('mutations中的JIAN被调用了',state,value);