详解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的作用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
  • 详解Vuex中mapState的具体用法
  • Vuex利用state保存新闻数据实例
  • 详解vuex 中的 state 在组件中如何监听
  • Vuex之理解state的用法实例
  • vuex state及mapState的基础用法详解
赞 (0)

相关推荐

  • Vuex利用state保存新闻数据实例

    Vuex利用state保存新闻数据实例

    回顾 以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系统之战"

  • 详解Vuex中mapState的具体用法

    今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userI

  • Vuex之理解state的用法实例

    1.什么是state? 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新.(这里"状态"="数据"),也就是是说数据和视图是同步的. 2.局部状态 获取:在Vue组件中获

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

  • vuex state及mapState的基础用法详解

    vuex state及mapState的基础用法详解

    先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车(在这个过程中会提示你是否安装一些依赖包,比如vue-router,es6语法检查等等,这些根据你个人习惯或者癖好选择Y/N) 4.npm i (这个是安装项目的依赖包) 5.npm run dev(启动你的vue项目) 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成,然后你可以删除掉没有用的组件

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

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

    详解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 V

  • 详解Vuex中getters的使用教程

    详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • 详解vuex中mutation/action的传参方式

    前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面.对于mutation/action,有一个常见的操作就是传参,也就是官网上说的"提交载荷". 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法.其中,state模块中配置如下 //vuex中的state const state = { count: 0 } export default state; mutatio

  • 详解vuex中的this.$store.dispatch方法

    vuex中的this.$store.dispatch方法 main.js new Vue({ el:'#app', router, store, render:h=>h(APP) }) store/index.js import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' import user from '.modules/user' import getters from '.getters'

  • 详解vuex中action何时完成以及如何正确调用dispatch的思考

    在项目中遇到关于action与dispatch使用的一些细节问题,经过搜索得到了一些答案. 特意在此提出,如有错误还请指出,十分感谢- 问题1:如果action是异步的,那么怎么知道它什么时候完成?在vuex的官网给出了答案: 注:如果需要通过组合多个action来完成某些逻辑,用async/await会更简单一点 问题2: 如果action是同步的,就不需要等待它完成了吗? 其实这个问题相当于在w:dispatch('some action')是一个同步函数还是异步函数. 如果dispatch

  • 详解js中call与apply关键字的作用

    javascript call与apply关键字的作用 apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. var func = function(a,b,c) { alert(a + b + c); } func.apply(null,[1,2,3]);//弹出6 func.call(null,1,2,3);//弹出6 当apply与call传入的第一个参数为n

  • vue3.0使用mapState,mapGetters和mapActions的方式

    目录 vue2.0中使用mapState及mapActions的方式 vue3.0中获取state和使用actions的方式 如何才能在vue3下使用mapState这些api呢? vue3对vuex中mapState,mapGetters辅助函数封装 1. readonly API的使用 2. 响应式变量直接解构会失去响应性 3. watchEffect 清除副作用 4. setup 函数访问Vuex中Store数据 vue2.0中使用mapState及mapActions的方式 // 使用m

  • vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1.在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <template> <div class="vuexReponse"> <div @click="changeVal">点击</di

随机推荐