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选择器(常用选择器说明)
Sep 28 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
angular4自定义组件详解
Sep 28 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
React配置子路由的实现
Jun 03 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
用webpack4开发小程序的实现方法
2019/06/04 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python 处理图片像素点的实例
2019/01/08 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
学生党员公开承诺书
2014/05/28 职场文书
母亲节寄语大全
2015/02/27 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏