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 相关文章推荐
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
何时/使用 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 上传文件的方法(类)
2009/07/30 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP实现递归无限级分类
2015/10/22 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
$()JS小技巧
2007/07/21 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
拖鞋店创业计划书
2014/01/15 职场文书
收银员岗位职责
2014/02/07 职场文书
统计岗位职责
2014/02/21 职场文书
党员岗位承诺书
2014/03/25 职场文书
自我推荐信范文
2014/05/09 职场文书
计算机求职信
2014/07/02 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python自动化测试之Selenium详解
2022/03/13 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL