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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
react基本安装与测试示例
Apr 27 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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
DSP接收机前端设想
2021/03/02 无线电
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
javascript 常用方法总结
2009/06/03 Javascript
javascript中的new使用
2010/03/20 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python用Configobj模块读取配置文件
2020/09/26 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
办公室主任先进事迹
2014/01/18 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
干部培训简讯
2015/07/20 职场文书