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的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
创建与框架无关的JavaScript插件
Dec 01 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python global全局变量函数详解
2018/09/18 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python自动创建Excel并获取内容
2020/09/16 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
生产班组长岗位职责
2014/01/05 职场文书
初中数学教学随笔
2015/08/15 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
分享Python异步爬取知乎热榜
2022/04/12 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python