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 学习之二 属性(html()与html(val))
Nov 25 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
Javascript自定义事件详解
Jan 13 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
何时/使用 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
会话Bean的种类
2013/11/07 面试题
远东集团网络工程师面试题
2014/10/20 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
建设工地安全标语
2014/06/07 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
导游词之潮音寺
2019/09/26 职场文书
mysql 索引合并的使用
2021/08/30 MySQL