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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
ReactRouter的实现方法
Jan 25 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
php文件上传的例子及参数详解
2013/12/12 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
django自带的权限管理Permission用法说明
2020/05/13 Python
Django中FilePathField字段的用法
2020/05/21 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
中英文求职信范文
2014/01/27 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
离婚案件答辩状
2015/05/22 职场文书
比赛主持人开场白
2015/05/29 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技