vuex分模块后,实现获取state的值


Posted in Javascript onJuly 26, 2020

问题:vuex分模块后,一个模块如何拿到其他模块的state值,调其他模块的方法?

思路:

1.通过命名空间取值--this.$store.state.car.list // OK

2.通过定义该属性的getter方法,因方法全局注册,不存在命名空间,可以通过this直接调用。

this.$store.state.car.carGetter

我在car模块中自己的定义了state, getters,

this.$store.state.car.list可以拿到值.

但是,this.$store.state.car.carGetter报错,

请问.如何在组件中调用这个getters,

//car.js
state = {
  list: []
}
getters = {
  carGetter: state => {
    return state.list.filter('');
  }
}
new Vuex.Store({
  getters: {
    test: state => {
      return '02';
    } 
  },
  modules: { car }  
})
// 组件
this.$store.state.car.list // OK
this.$store.state.car.carGetter // undefined
this.$store.state.carGetter // 为什么这么用ok, 难道会把模块中的getters注册到root ?

已解决!

模块内部的 action、mutation、和 getter 现在仍然注册在全局命名空间——这样保证了多个模块能够响应同一 mutation 或 action。

补充知识:vuex使用模块的时候 获取state里的数据语法

普通语法

this.$store.state.【哪个数据】

模块化语法:

this.$store.state.【哪个模块】.【哪个数据】

<template>
<div class="panel panel-info">
   <div class="panel-heading">
     <h4 class="panel-title">购物车列表</h4>
   </div>
   <div class="panel-body">
     <p v-if="!CartList.length">这里什么都没有,请先添加商品。</p>
     <CartListItem v-for="ele in CartList" :key="ele.id" :cartlist-iteam="ele"/>
   </div>
   <div class="panel-footer">
     <a href="" class="btn btn-block btn-danger">清空购物车({{cartQuantity}})</a>
     <a href="" class="btn btn-block btn-info">立即结算({{cartTotal}})</a>
   </div>
 </div>
</template>

<script>
import CartListItem from './CartListItem'
import { mapGetters } from 'vuex'
export default {
 name: 'CartList',
 components: {
  CartListItem
 },
 computed: {
  CartList () {
   return this.$store.state.cartModule.updateCartList
  },
  ...mapGetters(['cartQuantity', 'cartTotal'])
 }
}
</script>

以上这篇vuex分模块后,实现获取state的值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
详解vue的diff算法原理
May 20 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 #Javascript
在Vuex中Mutations修改状态操作
Jul 24 #Javascript
Vue自动构建发布脚本的方法示例
Jul 24 #Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 #Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
django 删除数据库表后重新同步的方法
2018/05/27 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
详解Python装饰器
2019/03/25 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
前台接待岗位职责
2013/12/03 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
车间班组长的职责
2013/12/13 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
《雷雨》教学反思
2014/02/20 职场文书
汽车促销活动方案
2014/03/31 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
升学宴答谢词
2015/01/05 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL