当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。

 // 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex' export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练,es6的箭头函数,传入参数是state,返回值是state.count。然后把返回值映射给count,此时调用this.count就是store里的count值
count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count', // 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符(现处于 ECMASCript 提案 stage-4 阶段),我们可以极大地简化写法:

  1.  computed: {
    localComputed () { /* ... */ },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
    // ...
    })
    }

    对象扩展运算符:

  1.  <span style="font-size:14px;">let z = { a: , b:  };
    let n = { ...z };
    n // { a: 3, b: 4 }</span>
  2.  

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

  1.  computed: mapState([
    // 映射 this.count 为 store.state.count
    'count'
    ])
  2.  

mapMutations和mapActions:

mapMutations/mapActions只是把mutation/action函数绑定到methods里面,调里面的方法时正常传参数。

注意:映射都是映射到当前对象,使用时需要用this来调用。

例如:

 methods:{
...mapMutations(['login'])
} 下面使用this.login(data);

vuex中mapState、mapMutations、mapAction的理解的更多相关文章

  1. Vuex中mapState的用法

    Vuex中mapState的用法   今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...

  2. vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  3. vuex 中关于 mapMutations 的作用

    mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...

  4. vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations

    1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...

  5. vuex之 mapState, mapGetters, mapActions, mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.cnblogs.com/adouwt/p/8283 ...

  6. vuex 中关于 mapState 的作用

    辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...

  7. vuex的mapState方法来获取vuex的state对象中属性

    有两种写法 1.首先在组件中引入vuex的mapState方法: 首先在组件中引入vuex的mapState方法: import { mapState } from 'vuex' 然后在compute ...

  8. vuex 中五大核心以及map函数的应用

    什么是vuex? 我理解的vuex就是数据和状态的管理 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex) 五大核心: const store = new Vuex.Store({ ...

  9. vuex里mapState,mapGetters使用详解

    这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...

随机推荐

  1. EL表达式的11隐含对象

    EL表达式在不同范围如何取值: <% pageContext.setAttribute("book", "红楼梦"); request.setAttrib ...

  2. HDU 2018 Cow Story DP

    Basic DP Problem URL:https://vjudge.net/problem/HDU-2018 Describe: There is a cow that gives birth t ...

  3. Oracle 服务名/实例名,Service_name 和Sid的区别

    Service_name 和Sid的区别Service_name:该参数是由oracle8i引进的.在8i以前,使用SID来表示标识数据库的一个实例,但是在Oracle的并行环境中,一个数据库对应多个 ...

  4. asp.net core在发布时排除配置文件

    使用命令发布 dotnet restore dotnet publish -c Release -r win-x64 -o "D:\services" 这样发布总是是将配置文件覆盖 ...

  5. 基于EPICS实现西门子S7通信

    (1)       EPICS官网下载Demo并复制文件到指定位置 (2)       创建Modules文件夹,wget https://epics.anl.gov/download/modules ...

  6. O003、准备 KVM 实验环境

    参考https://www.cnblogs.com/CloudMan6/p/5240770.html   KVM 是 OpenStack 使用的最广泛的Hypervisor,本节介绍如何搭建 KVM  ...

  7. 105、Replicated Mode VS Global Mode (Swarm12)

    参考https://www.cnblogs.com/CloudMan6/p/8028712.html   Swarm 可以在 Service 创建和运行过程中灵活的通过 --replicas 调整容器 ...

  8. MySQL 的索引是什么?怎么优化?

    索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...

  9. mySql 的常用命令

    一.数据库操作 1.创建数据库 create database <数据库名>: -- 例如,创建test数据库,create database test; 2.查询所有的数据库 show ...

  10. CentOS7 SVN基本配置

    开机自启指令如下 systemctl enable svnserve.service 对应可执行脚本文件路径 vim /etc/sysconfig/svnserve 查看状态: ps -ef|grep ...