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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
node.js require() 源码解读
Dec 13 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
javascript实现超好看的3D烟花特效
Jan 01 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
一个oracle+PHP的查询的例子
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
在php中取得image按钮传递的name值
2006/10/09 PHP
一个用php3编写的简单计数器
2006/10/09 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python切片工具pillow用法示例
2018/03/30 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python中if嵌套命令实例讲解
2021/02/25 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
幼儿园大班区域活动总结
2014/07/09 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
2016教师节感恩话语
2015/12/09 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python