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蓝色风格滑动导航栏代码分享
Aug 19 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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
我的论坛源代码(五)
2006/10/09 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python编写爬虫小程序
2015/05/14 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
使用Tkinter制作信息提示框
2020/02/18 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
火山动力Java笔试题
2014/06/26 面试题
大学生英语演讲稿
2014/04/24 职场文书
出国留学担保书
2014/05/20 职场文书
2014年学习部工作总结
2014/11/12 职场文书
党小组意见范文
2015/06/08 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
python开发制作好看的时钟效果
2022/05/02 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers