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系列之数值计算
Jun 07 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
详解JVM系列之内存模型
Jun 10 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jquery选择器简述
2015/08/31 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python读写二进制文件的方法
2015/05/09 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python复制文件到指定目录的实例
2018/04/27 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python 多进程原理及实现
2020/12/21 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
公司拓展活动方案
2014/02/13 职场文书
学生会部长竞聘书
2014/03/31 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
我的中国梦口号
2014/06/16 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
入党政审材料范文
2014/12/24 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
停课通知书
2015/04/24 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
mysql如何能有效防止删库跑路
2021/10/05 MySQL