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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
浅谈jquery事件处理
Apr 24 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP5.3新特性小结
2016/02/14 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
python编程开发之日期操作实例分析
2015/11/13 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python实现PID算法及测试的例子
2019/08/08 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python数组循环处理方法
2019/08/26 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
教师辞职报告范文
2014/01/20 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
伊索寓言教学反思
2014/05/01 职场文书
档案管理员岗位职责
2015/02/12 职场文书
闪闪红星观后感
2015/06/08 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers