一、通过mapState函数的对象参数来赋值:

<p>{{ count }}</p>
<p>{{ count1 }}</p>
<p>{{ count2 }}<p>
//导入
import { mapState } from 'vuex'
export default {
data() {
return {
msg: 'vuex理解要点',
id: 1
}
},
store,
//方法二:通过mapState对象来赋值
computed: mapState({
//使用箭头函数
count: state => state.count,
//传入字符串 ‘count’ 等同于 `state => state.count`
count1: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
count2(state) {
return state.count + this.id
}
})
}
三、通过mapState函数的数组参数来赋值
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
// 映射 this.count 为 store.state.count
computed:mapState(['count'])

关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState的更多相关文章

  1. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions

    介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...

  2. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations

    在组件中提交Mutations: import { mapState, mapMutations } from 'vuex' export default { data() { return { ms ...

  3. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters

    简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...

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

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

  5. vuex mapState、mapGetters、mapActions、mapMutations的使用

    例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...

  6. Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间

    1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...

  7. vuex中mapState、mapMutations、mapAction的理解

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

  8. vuex学习与实践——mapState、getter、mapGetters

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

  9. vuex状态管理demo

    vuex状态管理主要包含四个概念  mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...

随机推荐

  1. select case when if

    select case when if 的一些用法 - 马丁传奇 - 博客园 https://www.cnblogs.com/martinzhang/p/3220595.html Write a SQ ...

  2. (22) java web的struts2框架的使用-struts配置文件

    1,配置文件的引用 struts中配置文件可以有多个,每个模块的包里面都可以单独设立一个struts配置文件. 主的配置文件,放在“src”文件夹下,可以引入其他配置文件,引入方式: <!-- ...

  3. POJ1182 食物链 —— 种类并查集

    题目链接:http://poj.org/problem?id=1182 食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: ...

  4. 12_传智播客iOS视频教程_注释和函数的定义和调用

    OC的注释和C语言的注释一模一样.它也分单行注释和多行注释. OC程序里面当然可以定义一个函数.并且定义的方式方法和调用的方式方法和我们C语言是一模一样的.OC有什么好学的?一样还学个什么呢? 重点是 ...

  5. Node 基本使用

    node -v:查看node版本 npm -v:查看npm版本 npm install npm -g :升级npm版本 npm install <module_name> [-g]:安装指 ...

  6. bzoj 4078: [Wf2014]Metal Processing Plant【二分+2-SAT+枚举+并查集】

    枚举从大到小s1,二分s2(越大越有可能符合),2-SAT判断,ans取min 思路倒是挺简单的,就是二分的时候出了比较诡异的问题,只能二分s2的值,不能在数组上二分... 有个优化,就是当不是二分图 ...

  7. (8)css表格

    用css设置表格样式 *<table></table> 标签定义 HTML 表格. * tr 元素定义表格的行:th 元素定义表格的表头:td 元素定义表格中的单元格:capt ...

  8. Step 4: Install and Configure Databases

    https://www.cloudera.com/documentation/enterprise/latest/topics/cm_ig_installing_configuring_dbs.htm ...

  9. linux系统资源限制ulimit

    ulimit命令用来限制系统用户对shell资源的访问.如果不懂什么意思,下面一段内容可以帮助你理解: 假设有这样一种情况,当一台 Linux 主机上同时登陆了 10 个人,在系统资源无限制的情况下, ...

  10. 数据结构 - 顺序栈的实行(C语言)

    数据结构-顺序栈的实现 1 顺序栈的定义 既然栈是线性表的特例,那么栈的顺序存储其实也是线性表顺序存储的简化,我们简称为顺序栈.线性表是用数组来实现的,对于栈这种只能一头插入删除的线性表来说,用数组哪 ...