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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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/11/16 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php中explode函数用法分析
2014/11/15 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php中Snoopy类用法实例
2015/06/19 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
回调函数的意义以及python实现实例
2017/06/20 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python判断完全平方数的方法
2018/11/13 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python如何随机生成高强度密码
2020/08/19 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
毕业生自荐信格式
2014/03/07 职场文书
怎样填写就业意向
2014/04/02 职场文书
校园环保建议书
2014/05/14 职场文书
村居抓节水倡议书
2014/05/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
大学军训决心书
2015/02/05 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS