详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

网络转载  2018-04-13   作者:Burnner   [简洁网络]

本文作者主要介绍了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以参考下

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了。。。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子,希望能帮助理解:

在store中代码 

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
  count: 10,
  numb: 10086
 },
 getters: {
  add: (state, getter) => {
   state.count = getter.add;
   return state.count;
  },
 },
 mutations: {
  increment(state,){
    state.count += 2;
  },
 },
 actions: {
  actionA({ dispatch, commit }) {
   return commit('add');
  },
 }
}); 

export default store; 

在调用的模块里面的代码如下:

<template>
 <div class="hello">
  <button @click="increment">加{{count}}</button>
 </div>
</template>
<script>
 import {mapState,mapActions} from 'vuex'
 export default {
  name: 'hello',
  data () {
   return {
    msg: 'Welcome to Your Vue.js App'
   }
  },
  methods:{
   increment(){
    this.$store.dispatch('incrementsync').then(() => {
     console.log('then');
    });
   }
  },
  computed: mapState({ // mapState相当于映射
    count: 'numb', //这个时候count应该等于多少?!! 是等于store文件里面的count呢还是等于numb?答案是等于numb!这边的意思是mapState把'numb'的值映射给了count,所以count等于10086
  })
 }
</script> 

这个时候按钮应该显示加10还是显示加10086?答案是加10086,所以map其实就是一个在store文件中的映射而已,就是不用让你要调用一个值需要敲这么多代码:this.$state.count;而只需要用count。。。

界面效果:

好了,其他的mapAction,mapMutations的原理是一样样的。

总结

以上所述是小编给大家介绍的详解vuex中mapState,mapGetters,mapMutations,mapActions的作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对简洁网络网站的支持!

相关文章

  • 详解Vue-cli 创建的项目如何跨域请求

    详解Vue-cli 创建的项目如何跨域请求

    本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解vue-router基本使用

    详解vue-router基本使用

    本篇文章主要介绍了详解vue-router基本使用,详细的介绍了vue-router的概念和用法,有兴趣的可以了解一下。
    2017-04-04
  • VueJS事件处理器v-on的使用方法

    VueJS事件处理器v-on的使用方法

    本篇文章主要介绍了VueJS事件处理器v-on的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue代码分割懒加载的实现方法

    Vue代码分割懒加载的实现方法

    这篇文章主要给大家介绍了关于Vue代码分割懒加载的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • Vue封装一个简单轻量的上传文件组件的示例

    Vue封装一个简单轻量的上传文件组件的示例

    这篇文章主要介绍了Vue封装一个简单轻量的上传文件组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 概述VUE2.0不可忽视的很多变化

    概述VUE2.0不可忽视的很多变化

    本文给大家分析下vue2.0几个重要的与自己目前项目相关的变化,也是vue2.0不可忽视的变化,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • vuex的简单使用教程

    vuex的简单使用教程

    vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了vuex的简单使用,需要的朋友可以参考下
    2018-02-02
  • Vue.js路由vue-router使用方法详解

    Vue.js路由vue-router使用方法详解

    这篇文章主要为大家详细介绍了Vue.js路由vue-router使用方法,具有一定的参考价值,感兴趣的码友们可以参考一下
    2017-03-03
  • 前端框架Vue.js中Directive知识详解

    前端框架Vue.js中Directive知识详解

    这篇文章主要为大家详细介绍了前端框架Vue.js中Directive知识,感兴趣的码友们可以参考一下
    2016-09-09
  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08