store的结构:

city模块:

在各模块使用了命名空间的情况下,即 namespaced: true 时:

组件中访问模块里的state

传统方法:

this.$store.state['模块名']['属性名']

例如:this.$store.state.city.list。

控制台输出 this.$store.state

mapState方法:

import { mapState } from 'vuex'
computed: {
// ...
...mapState({
list: state => state.city.list
})
}

组件中dispatch模块里的actions

传统方法:

// @params:opts Object or String
this.$store.dispatch('模块名/属性名', opts)

组件中使用如:this.$store.dispatch('city/add', '上海')

mapActions方法:

引入:import { mapActions } from 'vuex'

methods中的属性名可以更改成其他任意名字,但是属性值需要和模块名,actions属性名对应。

在组件中访问模块里的getter

传统方法:

this.$store.getters['模块名/属性名']

如:this.$store.getters['city/findOne']('a')

mapGetters方法:

引入:import { mapGetters } from 'vuex'

这个getter返回的是一个函数,这样可以给getter传参。此时getter通过方法访问时,每次都会去进行调用,而不会缓存结果。

而getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

在vue组件中访问vuex模块中的getters/action/state的更多相关文章

  1. 为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的

     最近有一个疑惑:为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的         首先,我们看一个局部内部类的例子:             class OutClass {  ...

  2. cc31a_demo--CppPrimer_静态成员与继承-在派生类中访问基类中的static成员的方法

    //*基类中的static成员,在整个继承层次中只有一个实例 //*在派生类中访问基类中的static成员的方法 //1.基类名::成员名 //2.子类名::成员名 //3.对象.成员名 //4.指针 ...

  3. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  4. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

  5. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  6. Vue组件间通信-Vuex

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...

  7. nodejs中的fs模块中的方法

    nodejs中的fs模块 引入模块 const fs =require("fs") 检测文件是否存在fs.stat(path,callback) fs.stat("./n ...

  8. sklearn中的metrics模块中的Classification metrics

    metrics是sklearn用来做模型评估的重要模块,提供了各种评估度量,现在自己整理如下: 一.通用的用法:Common cases: predefined values 1.1 sklearn官 ...

  9. java中访问mysql数据库中的表结构信息

    package cn.hncu.meta; import java.sql.Connection;import java.sql.DatabaseMetaData;import java.sql.Re ...

随机推荐

  1. Spring Cloud-新一代Web框架微服务

    序言 springcloud是微服务架构的集大成者,将一系列优秀的组件进行了整合.基于springboot构建,对我们熟悉spring的程序员来说,上手比较容易. 通过一些简单的注解,我们就可以快速的 ...

  2. QPS/TPS的预估

    先说标准概念: TPS:Transactions Per Second(每秒传输的事物处理个数),即服务器每秒处理的事务数.TPS包括一条消息入和一条消息出,加上一次用户数据库访问.(业务TPS = ...

  3. Fiddler抓包Fiddler过滤

    1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...

  4. PHP 动态输出 svgz 格式图片

    使用PHP动态生成SVGZ图片(gzip压缩的SVG) 经测试SVG的动画性能很差,简单的动画CPU都能占到 30%左右. 可能的用途: 动态天气图片 访问统计计数图片 文字验证生成 动态头像 静态外 ...

  5. BigDecimal 与double 转化失真

    1.BigDecimal(double val): 失真, 不要使用 BigDecimal(0.1)的值是: 0.1000000000000000055511151231257827021181583 ...

  6. SDN实验---Mininet实验(玩转流表)

    一:实验目的 (一)案例目的 (二)实验内容 (三)网络拓扑结构 二:OpenFlow流表实验准备 (一)使用Python设置网络拓扑 --- tree_topo.py from mininet.to ...

  7. vue aes

    npm install crypto-js import CryptoJS from "crypto-js/crypto-js"; const KEY = CryptoJS.enc ...

  8. mysqldump导出完整sql脚本

    #导出某个数据库--结构+数据 shell>mysqldump -h192.168.161.124 -uroot -pxxxxxx --opt db_name |gzip -9 > /db ...

  9. CPU时序信号和分频

  10. java拼接字符串、格式化字符串方式

    1.代码 //+ String arg0 = "Bob"; String arg1 = "Alice"; System.out.println("he ...