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. 9个PNG透明图片免费下载网站推荐

    9个PNG透明图片免费下载网站推荐 酷站推荐 2017.08.06 13:47 png格式的图片因为去掉了的背景,方便使用在任何颜色的背景,所以对于从事设计师的朋友来说,经常会用到png透明图片.相信 ...

  2. spring boot启动无法访问controller

    如题,检测 一.启动类Application是不是在最上一级,默认扫描启动类平级和下级目录的bean 二.启用内置Tomcat,注释掉 scope <dependency> <gro ...

  3. iOS - NSURLConnection finished with error - code -1002

    网络请求会异常,比如报错:Error domain: 在回调的地方打一个断点,然后用命令行查看下什么错误: po error 当错误是:**[Error Domain=NSURLErrorDomain ...

  4. (CSDN迁移) html中的rel属性

    在页面上若需要同时存在多个页面,就通过一个button开启一个页面时,就需要指定不同的 rel="relName". 否则新页面就会将就原有的页面给覆盖掉.

  5. mysql8.0 grant 创建账号及权限记录

    针对 42000错误 原文:https://stackoverflow.com/questions/50177216/how-to-grant-all-privileges-to-root-user- ...

  6. 关于jQuery请求后台成功一直走error回调函数问题

    如果dataType声明与响应不符就会进入error回调.就算接口请求成功,也是走error回调函数.

  7. Java高频面试题--单例设计模式

  8. C语言合并果子-贪心算法

    /*有几堆水果.每次你把两堆东西移到一起,形成更大的一堆.每个动作消耗的能量是两堆水果的总重量.如何把所有的水果堆在一起,消耗最少的能量?*/ 以上是题目,该题首先要读懂题目,每次移到一起以后都要将数 ...

  9. CLRS10.2-7练习 - 翻转单向列表

    要求: Give a Θ(n)-time nonrecursive procedure that reverses a singly linked list of nelements. The pro ...

  10. Java常用函数式接口--Predicate接口使用案例

    Java常用函数式接口--Predicate接口使用案例 该方法可以使用and来优化: 调用: