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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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
使用phpQuery采集网页的方法
2013/11/13 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python用户管理系统
2018/03/13 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
护理专业推荐信
2013/11/07 职场文书
环保倡议书500字
2014/05/15 职场文书
简历自我评价模板
2015/03/11 职场文书
2015大一新生军训感言
2015/08/01 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
详解Laravel服务容器的优势
2021/05/29 PHP
Mysql文件存储图文详解
2021/06/01 MySQL
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
python使用shell脚本创建kafka连接器
2022/04/29 Python