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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
使PHP自定义函数返回多个值
2006/11/26 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP面向对象详解(三)
2015/12/07 PHP
javascript中的事件代理初探
2014/03/08 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
js原生实现FastClick事件的实例
2016/11/20 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python怎么判断模块安装完成
2020/06/19 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
运动会入场词50字
2014/02/20 职场文书
军训感想500字
2014/02/20 职场文书
文员岗位职责范本
2014/03/08 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
无私奉献演讲稿
2014/09/04 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Python3.10的一些新特性原理分析
2021/09/15 Python