一、通过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. 百度AI的语音合成,语音识别

    1,语音的合成,识别 后端代码: from aip import AipSpeech, AipNlp import os # 语音合成 """ 你的 APPID AK S ...

  2. Vue实例及生命周期

    1,Vue实例生命周期. 有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求,开发,针对这样的需求,Vue提供给我们一系列的钩子函数 2,Vue生命周期的阶段 ...

  3. B. Flag of Berland

    B. Flag of Berland time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. 2.7 xargs和exec详解【转】

    本文转载自:http://ask.apelearn.com/question/13323 常用在查找中exec主要是和find一起配合使用,而xargs就要比exec用的地方要多了. exec  应用 ...

  5. URAL1099 Work Scheduling —— 一般图匹配带花树

    题目链接:https://vjudge.net/problem/URAL-1099 1099. Work Scheduling Time limit: 0.5 secondMemory limit: ...

  6. mysql查询表的字符集

    mysql查询表的字符集 SHOW CREATE TABLE user;

  7. codeforces 689D D. Friends and Subsequences(RMQ+二分)

    题目链接: D. Friends and Subsequences time limit per test 2 seconds memory limit per test 512 megabytes ...

  8. Java 并发 —— 读写锁(ReadWriteLock)

    读写锁(ReadWriteLock),顾名思义,就是在读写某文件时,对该文件上锁. 1. ReentrantReadWriteLock 三部曲: 加锁: 读写操作: 解锁:(为保证解锁操作一定执行,通 ...

  9. go语言godep使用命令

    godep 看见他的star比govendor,所以我使用它.官方地址 https://github.com/tools/godep install   1 go get github.com/too ...

  10. hdu 1284

    钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...