在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 ...
随机推荐
- 9个PNG透明图片免费下载网站推荐
9个PNG透明图片免费下载网站推荐 酷站推荐 2017.08.06 13:47 png格式的图片因为去掉了的背景,方便使用在任何颜色的背景,所以对于从事设计师的朋友来说,经常会用到png透明图片.相信 ...
- spring boot启动无法访问controller
如题,检测 一.启动类Application是不是在最上一级,默认扫描启动类平级和下级目录的bean 二.启用内置Tomcat,注释掉 scope <dependency> <gro ...
- iOS - NSURLConnection finished with error - code -1002
网络请求会异常,比如报错:Error domain: 在回调的地方打一个断点,然后用命令行查看下什么错误: po error 当错误是:**[Error Domain=NSURLErrorDomain ...
- (CSDN迁移) html中的rel属性
在页面上若需要同时存在多个页面,就通过一个button开启一个页面时,就需要指定不同的 rel="relName". 否则新页面就会将就原有的页面给覆盖掉.
- mysql8.0 grant 创建账号及权限记录
针对 42000错误 原文:https://stackoverflow.com/questions/50177216/how-to-grant-all-privileges-to-root-user- ...
- 关于jQuery请求后台成功一直走error回调函数问题
如果dataType声明与响应不符就会进入error回调.就算接口请求成功,也是走error回调函数.
- Java高频面试题--单例设计模式
- C语言合并果子-贪心算法
/*有几堆水果.每次你把两堆东西移到一起,形成更大的一堆.每个动作消耗的能量是两堆水果的总重量.如何把所有的水果堆在一起,消耗最少的能量?*/ 以上是题目,该题首先要读懂题目,每次移到一起以后都要将数 ...
- CLRS10.2-7练习 - 翻转单向列表
要求: Give a Θ(n)-time nonrecursive procedure that reverses a singly linked list of nelements. The pro ...
- Java常用函数式接口--Predicate接口使用案例
Java常用函数式接口--Predicate接口使用案例 该方法可以使用and来优化: 调用: