一、通过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. iptraf 网卡 ip 端口 监控 netstat 关闭端口方法

    18 commands to monitor network bandwidth on Linux server – BinaryTides https://www.binarytides.com/l ...

  2. Revit插件开发HelloWorld

    1. 使用 VS2012 先建立一个项目. 2. 在这里我们选择建立C# 类库项目, 改动项目名称为HelloWorld. 能够自己定义改动项目存放路径. 3. 加入 Revit 插件 API 的引用 ...

  3. USACO44 TimeTravel 时间旅行(链表)

    第一眼看到这题,woc,这不是主席树!?旁边HZ也表示同意,然后cGh队长就慢悠悠的过来:“想什么,USACO会有主席树!?” ↓打脸不解释,大家可以去%ta的博客(这样ta就不会D飞我了~)http ...

  4. HDU4612 Warm up —— 边双联通分量 + 重边 + 缩点 + 树上最长路

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4612 Warm up Time Limit: 10000/5000 MS (Java/Ot ...

  5. eoj 3507 坑爹的售票机

    EOJ 3507 坑爹的售票机   问题描述 oxx 和 xjj 决定和小伙伴们一同坐船前往 Xiamen.去 Xiamen 的船票一张 p 元. 当他们满怀兴致地来到港口时发现居然只有不设找零的自动 ...

  6. 金融事业部QA培训体系

    此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 引言     总结2015,放眼2016,纵观整个互联网圈,人才依然是业务成功的第一要素,在网易,我想也是这样 ...

  7. bzoj 1084: [SCOI2005]最大子矩阵【dp】

    分情况讨论,m=1的时候比较简单,设f[i][j]为到i选了j个矩形,前缀和转移一下就行了 m=2,设f[i][j][k]为1行前i个,2行前j个,一共选了k个,i!=j的时候各自转移同m=1,否则转 ...

  8. Luogu P3619 魔法 【贪心/微扰证明】

    题目描述 cjwssb知道是误会之后,跟你道了歉.你为了逗笑他,准备和他一起开始魔法.不过你的时间不多了,但是更惨的是你还需要完成n个魔法任务.假设你当前的时间为T,每个任务需要有一定的限制ti表示只 ...

  9. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  10. Hdu 5358 First One (尺取法+枚举)

    题目链接: Hdu 5358 First One 题目描述: 数组a有n个元素,S[i,j]定义为a[i]+a[i+1]+.....+a[j],问:这个死东西等于多少? 解题思路: 二分肯定超,这个题 ...