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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
jQuery参数列表集合
2011/04/06 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
Python 中random 库的详细使用
2021/06/03 Python
python解析照片拍摄时间进行图片整理
2022/07/23 Python