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 parseInt 函数分析(转)
Mar 21 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
JS实现网页时钟特效
Mar 25 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
coreseek 搜索英文的问题详解
2013/06/08 PHP
php过滤敏感词的示例
2014/03/31 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
java script编程起步(第三课)
2007/01/10 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python读取xlsx的方法
2018/12/25 Python
python dlib人脸识别代码实例
2019/04/04 Python
python logging日志模块原理及操作解析
2019/10/12 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Python celery原理及运行流程解析
2020/06/13 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
英语道歉信范文
2014/01/09 职场文书
音乐节策划方案
2014/06/09 职场文书
教师自查自纠材料
2014/10/14 职场文书
新年晚会开场白
2015/05/29 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis