虽然早就知道 mapState 的存在,但还是极少使用。最近代码的computed变多才开始意识到好处。

原来的代码:

  computed: {
findLastSixMonthAir () {
return this.$store.state.theme.findLastSixMonthAir
},
findLastSixMonthAirTown () {
return this.$store.state.theme.findLastSixMonthAirTown
},
},

改完的代码:

import { mapState } from 'vuex'

computed: {
...mapState('theme', ['findLastSixMonthAir', 'findLastSixMonthAirTown'])
},

vuex 温故而知新 mapState的使用的更多相关文章

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

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

  2. vuex里mapState,mapGetters使用详解

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

  3. Vuex中mapState的用法

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

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

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

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

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

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

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

  7. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  8. 关于Vuex的初步使用

    store.js文件中定义各个访问状态和方法 import Vue from "vue" import Vuex from "vuex" Vue.use(Vue ...

  9. vuex Loding加载..

    技术栈:vuex,mapActions, mapState 先在vuex的状态管理里定义好loding状态,以及加载文字 import Vue from 'vue'; import Vuex from ...

随机推荐

  1. 第七周 Word文档修订

    come from:http://www.sxszjzx.com/~c20/12-2/office-gj/ 第七周 Word文档修订 教学时间 2013-4-8 教学课时 2 教案序号 12 教学目标 ...

  2. NetCore的控制台应用中搭建WebServer的方法

    一.新建NetCore控制台项目,并引入下列Nuget包: Microsoft.AspNetCore.StaticFiles.Microsoft.AspNetCore.Http.Microsoft.A ...

  3. c++10进制转换为任意2-16进制数字

    #include<stdio.h> #include<stdlib.h> #include<iostream> using namespace std; int m ...

  4. Android StageFrightMediaScanner源码解析

    1. 简单介绍 Android中在StageFrightMediaScanner实现对多媒体文件的处理. 此外在StageFrightMediaScanner定义了支持的多媒体文件类型. 文件位置 f ...

  5. 批量 ping 测试脚本(IP 扫描)

    是否会使用 vpn 工作,已经成为魔法师和麻瓜之间最重要的区分.使用 vpn 工作,也产生了其它一些奇奇怪怪的问题,比如,选择 vpn 服务器. 你要测试哪个 vpn 离你最近. 所以,就有了下面的脚 ...

  6. Project Euler:Problem 63 Powerful digit counts

    The 5-digit number, 16807=75, is also a fifth power. Similarly, the 9-digit number, 134217728=89, is ...

  7. Struts 2相关配置与基本操作演示(案例Demo)

    基本介绍 Struts 2        Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2 ...

  8. java.lang.AbstractStringBuilder.enlargeBuffer

    04-18 10:22:08.585 3653-3653/com.tongyan.lanzhou.rv I/dalvikvm: "main" prio=5 tid=1 RUNNAB ...

  9. 让服务器可以下载apk和ipa文件

    选中指定网站→在右侧找到 MIME类型 → 双击进入已有类型页 → 点击最右侧添加 apk    application/vnd.android.package-archive MRP文件(国内普遍的 ...

  10. java 如何使用多线程调用类的静态方法?

      1.情景展示 静态方法内部实现:将指定内容生成图片格式的二维码: 如何通过多线程实现? 2.分析 之所以采用多线程,是为了节省时间 3.解决方案 准备工作 logo文件 将生成的文件保存在F盘te ...