欢迎光临万书涛的个人博客

vuex中的mapState,mapMutations是什么意思?

作者:万书涛  / 日期:2021-10-15 15:21:32 /  来源:本站原创 /   浏览:
摘要
我们知道,vuex能够能够通过store集中存储和管理组件数据,而我们通过mapState,mapMutations就可以在任意组件中使用这些数据和方法,这样就可以通过外部来调用公共数据,减少代码书写量,可以说是一种“全局性”操作,非常方便,下面就来详细解释一下。  
当我们创建vuex对象后,最为常见的vuex核心是state,mutation,其中的state存储的是公共数据,而mutation中存储的是方法,通过这个方法来改变state中的数据,而不能直接改修改state,下面是一个简单实例。
 

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {
        num: 10
    },
    mutations: {
        addnum(state) {
            // 变更状态
            state.num += 2
        }
    }
})
export default store

通过上面的实例可以看出,修改state中的num我们是通过mutations中的addnum进行的。
 
那么我们在组件中如何使用我们上面的mutation和state呢?,这就是本文所说的...mapState上场了,代码如下:
 
computed: {
...mapState(['num'])
},
methods: {
...mapMutations(['addnum'])
}

我们创建一个ceshi.vue,代码如下:

<button @click="addFun">数量+2</button>
methods: {
addFun(){
//第一种方法:直接调用mutations中的函数
this.addnum()
}
}

上面代码意思表示我们点击按钮后调用addFun方法,而addFun又通过...mapMutations(['addnum'])调用我们store中的mutation中的方法。
 
怎么样,这下清晰了吧, 其实mapState和mapMutaions就是把store仓库中的公共数据拿到组件中使用,并且通过组件来调用store仓库中的方法来显示和修改公共数据。
 
点赞作者(
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/267.html
如需转载,须以文字形式注明本文地址,否则禁止转载