在vue组件中访问vuex模块中的getters/action/state
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的更多相关文章
- 为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的
最近有一个疑惑:为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的 首先,我们看一个局部内部类的例子: class OutClass { ...
- cc31a_demo--CppPrimer_静态成员与继承-在派生类中访问基类中的static成员的方法
//*基类中的static成员,在整个继承层次中只有一个实例 //*在派生类中访问基类中的static成员的方法 //1.基类名::成员名 //2.子类名::成员名 //3.对象.成员名 //4.指针 ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- nodejs中的fs模块中的方法
nodejs中的fs模块 引入模块 const fs =require("fs") 检测文件是否存在fs.stat(path,callback) fs.stat("./n ...
- sklearn中的metrics模块中的Classification metrics
metrics是sklearn用来做模型评估的重要模块,提供了各种评估度量,现在自己整理如下: 一.通用的用法:Common cases: predefined values 1.1 sklearn官 ...
- java中访问mysql数据库中的表结构信息
package cn.hncu.meta; import java.sql.Connection;import java.sql.DatabaseMetaData;import java.sql.Re ...
随机推荐
- Spring Cloud-新一代Web框架微服务
序言 springcloud是微服务架构的集大成者,将一系列优秀的组件进行了整合.基于springboot构建,对我们熟悉spring的程序员来说,上手比较容易. 通过一些简单的注解,我们就可以快速的 ...
- QPS/TPS的预估
先说标准概念: TPS:Transactions Per Second(每秒传输的事物处理个数),即服务器每秒处理的事务数.TPS包括一条消息入和一条消息出,加上一次用户数据库访问.(业务TPS = ...
- Fiddler抓包Fiddler过滤
1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...
- PHP 动态输出 svgz 格式图片
使用PHP动态生成SVGZ图片(gzip压缩的SVG) 经测试SVG的动画性能很差,简单的动画CPU都能占到 30%左右. 可能的用途: 动态天气图片 访问统计计数图片 文字验证生成 动态头像 静态外 ...
- BigDecimal 与double 转化失真
1.BigDecimal(double val): 失真, 不要使用 BigDecimal(0.1)的值是: 0.1000000000000000055511151231257827021181583 ...
- SDN实验---Mininet实验(玩转流表)
一:实验目的 (一)案例目的 (二)实验内容 (三)网络拓扑结构 二:OpenFlow流表实验准备 (一)使用Python设置网络拓扑 --- tree_topo.py from mininet.to ...
- vue aes
npm install crypto-js import CryptoJS from "crypto-js/crypto-js"; const KEY = CryptoJS.enc ...
- mysqldump导出完整sql脚本
#导出某个数据库--结构+数据 shell>mysqldump -h192.168.161.124 -uroot -pxxxxxx --opt db_name |gzip -9 > /db ...
- CPU时序信号和分频
- java拼接字符串、格式化字符串方式
1.代码 //+ String arg0 = "Bob"; String arg1 = "Alice"; System.out.println("he ...