【Vue学习总结】26.Vuex的重要属性之Getter、Action、Module

我们修改一下上一篇编写的store.js，增加一个Getter：. import Vue from 'vue'. 【Vue学习总结】26.Vuex的重要属性之Getter、Action、Module 光仔December 于 2021-02-1511:57:42 发布 227 收藏 分类专栏： vue入门与实战 文章标签： vuex action getter module state 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/acmman/article/details/113814823 版权 vue入门与实战 专栏收录该内容 68篇文章 57订阅 订阅专栏 接上篇《25.Vuex介绍和实例演示》 上一篇我们对vuex的基础和部分核心属性进行了介绍，本篇继续介绍vuex的其他重要属性，以及这些属性的实际应用。

本系列博文使用的Vue版本：2.6.11vuex官方网站：https://vuex.vuejs.org/zh/ 上一篇介绍了State和Mutation，本篇继续来说Getter、Action和Module。

一、Getter 官方网站对Getter的定义是store的计算属性，Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

直白一点来说就是，Getter允许我们在改变数据的时候，做一些操作。

什么叫改变数据的时候做一些操作呢？例如state中有一个数据列表list，有时候我们需要根据条件过滤list，形成一个新的结果集以供用户查看，而这种处理结果多个组件之间可能都要使用，定义一个过滤函数，复制它到每一个组件，或者抽取到一个共享函数然后在每个组件导入它，都不是太理想。

这里我们使用getter这个共享状态处理对象，可以在任意组件直接调用它，在getter中定义的方法中的计算逻辑，会根据state中的值的变化而动态变化，简直不要太方便。

这里我们写一个实例来让大家理解一下getter。

我们修改一下上一篇编写的store.js，增加一个Getter： importVuefrom'vue' importVuexfrom'vuex'   Vue.use(Vuex)   /**1.state在vuex中主要用于存储数据*/ varstate={   count:1 }   /**2.mutations里面放的是方法，主要用于改变state里面的数据*/ varmutations={   incCount(){     ++state.count;   } } //定义Getter计算属性，改变state里面的count数据的时候，会触发getter里面的方法，获取新的值 vargetters={   computedCount:(state,getters)=>{     returnstate.count*2;   } }  //3.定义store conststore=newVuex.Store({   state,   mutations:mutations,   getters })   //4.暴露store exportdefaultstore; 这里我们在getters里定义了一个getter，当上面state值改变的时候（mutation中的incCount方法一执行），就会触发getter的方法，这里的computedCount就会返回当前state中count最新的值乘以2的结果。

然后我们在HelloWorld.vue中调用getter的方法，获取其计算的state中count最新的值乘以2的结果：   注意，上面的“{{this.$store.gatters.computedCount}}”就是获取getter里的方法。

效果：可以看到，随着count的变化，相应的getter也被触发并更新的新的计算值。

总结一下，getter常用在state属性值动态计算结果且任意组件可直接获取的场景。

二、Action 根据官网介绍，Action类似于Mutation，他们的不同之处在于：●Action提交的是Mutation，而不是直接变更状态●Action可以包含任何异步操作。

说白了Action就是可以直接的操作Mutation，间接的改变State中的属性值，然后可以异步操作。

这个属性很少使用到，这里简单介绍一下。

我们编写实例来使用一下Action，在Store.js里继续定义action： importVuefrom'vue' importVuexfrom'vuex'   Vue.use(Vuex)   /**1.state在vuex中主要用于存储数据*/ varstate={   count:1 }   /**2.mutations里面放的是方法，主要用于改变state里面的数据*/ varmutations={   incCount(){     ++state.count;   } } //定义Getter计算属性，改变state里面的count数据的时候，会触发getter里面的方法，获取新的值 vargetters={   computedCount:(state,getters)=>{     returnstate.count*2;   } }  //定义Action，用来异步操作Mutation varactions={   incMutationsCount(context){//这里的context是一个与store实例具有相同方法和属性的对象     context.commit('incCount');//调用context.commit提交一个Mutation方法   } } //3.定义store conststore=newVuex.Store({   state,   mutations:mutations,   getters,   actions })   //4.暴露store exportdefaultstore; 上面的Action函数的context参数，是一个与store实例具有相同方法和属性的对象，可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters。

然后在外部通过“dispatch”来触发action的方法： this.$store.dispatch('incMutationsCount'); 这里我们就不再做测试了，大家理解即可。

总结一下，Action常用在需要异步调用Mutation的方法时使用的。

三、Module 当我们把vue项目的所有状态全部维护至一个store对象中时，就可能导致store对象变得相当臃肿，为了解决以上问题，Vuex允许我们将store分割成模块（module）。

每个模块拥有自己的state、mutation、action、getter甚至是嵌套子模块——从上至下进行同样方式的分割，例如： constmoduleA={  state:()=>({...}),  mutations:{...},  actions:{...},  getters:{...} } constmoduleB={  state:()=>({...}),  mutations:{...},  actions:{...} } conststore=newVuex.Store({  modules:{   a:moduleA,   b:moduleB  } }) store.state.a//->moduleA的状态 store.state.b//->moduleB的状态 这里面每个子模块调用的state默认都是自己本模块的state，如果getter需要调用根state和getter，在参数里添加rootState、rootGetters即可，同时action中可以通过context.rootState、context.rootGetters获取根的state和getter。

剩下的“命名空间”、“模块动态注册”和“模块重用”大家可以前往官网https://vuex.vuejs.org/zh/guide/modules.html详细学习，这里不再赘述。

四、总结 Vuex解决了vue中不同组件之间的数据共享，以及数据持久化的问题。

以上就是vue以及vuex的全部内容，至此vue的基础学习全部结束。

请关注后续的vue项目实战的新专栏博文，感谢支持！ 参考：《IT营：itying.com-2018年Vue2.x5小时入门视频教程》转载请注明出处：https://blog.csdn.net/acmman/article/details/113814823 光仔December 关注 关注 0 点赞 踩 0 评论 0 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 状态管理集Vuex的使用及理解store An滴饭儿的博客 04-24 150 我个人比较倾向于先将流程再讲理解，这样有些童鞋不想往下看的时候，也能知道具体怎么使用了。

使用流程如下： 1、安装npminstallvuex--save 2、src目录下新建一个store目录，新建一个index.js文件，代码如下： importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) exportdefaultne... Vue总结 lsylhx123的博客 10-26 87 1.单页面应用 加载单个HTML页面，局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。

一旦页面加载完成，就不会再有整页刷新，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SP.. 参与评论 您还未登录，请先 登录 后发表或查看评论 Vuex获取getter对象中的值的所有方法（包括module中的getter） trenki的博客 05-21 6043 getter取值与state取值具有相似性 1.直接从根实例获取 //main.js中，把store注册在根实例下，可使用this.$stroe.getters直接取值 computed:{ testNum1(){ returnthis.$store.getters.testNum1; } } 2.使用mapState取值 import{mapGetters}from"vuex"; exportdefault{ computed:{ ...mapGet VUE：Vuex--状态管理模式(store/state/Getter/Action/Mutation/Module) Schon_zh的博客 09-21 4275 Vuex是什么？ Vuex是一个专为Vue.js应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个Vuex应用的核心就是store（仓库）。

“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。

Vuex和单纯的全局对象有以下两点不同： Vuex的状态存储是响应式的。

当Vue... Vuex的学习笔记三：核心概念Action和Getter的理解和使用 前端探险家的博客 12-08 748 Vuex的主要核心概念一.Action1.1Action的自我介绍1.2组件触发Action中的异步函数1.3组件触发Action异步时携带参数二.Getter2.1Getter的自我介绍2.3组件访问Getter的数据 一.Action 1.1Action的自我介绍 Action用于处理异步任务 如果通过异步操作变更数据，必须通过Action ，而不是使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

Action提交的是mutation Action函数接 ContextRoot选/的原则 Mike的专栏 06-10 1279 ContextRoot通常是/.这个代表了你的webmodule的名字。

当只有一个webmodule的时候，是可以将应用程序部署到/的。

也就是说部分可以是长度为零的空串。

那个整个ContextRoot就成了/. 通常只为你的主站做如此部署。

在主站之下，还有其他的应用时，就可以用/的形式，给各应用程序命名，部署在主站之下。

Vue3-Vuex中的命名空间module使用(三) 最新发布 weixin_39137100的博客 02-11 434 什么是命名空间？ Vuex为了解决状态特别多造成store对象非常复杂的时候，允许将store分割成模块(module) 每个模块都可以拥有自己的state、mutation、action、getter 使用示例 namespaced命名空间关键字（用在模块的js文件里） namespaced:true store文件夹下新建modules文件夹 新建home.js exportdefaultconsthomeModule={ namespaced:true,//命名空间 Vuex的使用方法第二篇之mutation和action及getter的基本使用 木木 09-08 5748 mutations 在vue中，只有mutation才能改变state.mutation类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation才能改变state,所以处理函数自动会获得一个默认参数state.所谓的类型其实就是名字， 先看上一篇文章的例子： 在没有用vuex的时候，我们可以实现点击颜色切换 用了vuex后，只实现了颜色变换一次... Vuex之gettersmodules详解（含概念及代码详解） qq_48046110的博客 10-14 1738 getters 1.getters主要实现对state中的数据做进一步筛选，过滤操作 2.getrers相当组件中的计算属性，它也会使用缓存。

在仓库中过滤数据。

而不是在组件中过滤数据。

把过滤数据的操作提前。

当不使用参数时，过滤数组 图解 当使用参数时，过滤数组 modules 通过modules配置项，可以把多个模块中的数据合并成一个大数据，放到store中。

... Vuex之module使用方法及场景 热门推荐 绿足博客 07-22 2万+ vuex之module使用方法及场景 一.module使用场景 在项目开发过程中，随着项目逐渐增大，数据关联复杂度逐渐加大，多人协同开发，人员变动等。

我们会遇到vuex数据更新时，执行某个action导致同名/未预测到的关联数据发生了变化。

vue基本思想之一便是数据驱动，... vue.js学习总结（持续更新） 阿清的前端进阶之路 09-04 307 一.vue.js教程总结 1.Object.freeze() 阻止数据改变时，视图会进行重渲染的现象。

2.vue暴露了一些有用的实例属性与方法，加上前缀$ vm.$data===data//=>true vm.$el===document.getElementById('example')//=>true //$watch是一个实例方法 vm.$watch('a',function(newValue,oldValue){ //这个回调将在`vm Vue第六天学习总结——Vue全家桶之Vuex(Vuex概述、Vuex的基本使用、Vuex的核心概念、基于Vuex的案例) weixin_52819925的博客 08-28 569 (一)Vuex概述 1.组件之间共享数据的方式 父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBus $on接收数据的那个组件 $emit发送数据的那个组件 之前共享数据，是通过以上方式 以上方式，只适用于小范围内传递数据 2.Vuex Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享 没有vuex时：A向B传递数据，需要一一传递，非常麻烦 有vuex时，A直接将要共享的数据，存储到Store中，然后B直接从S Vue学习总结 estrusKing的博客 07-04 27 文章目录安装vue指令内置指令自定义指令***全局指令******局部指令***选项全局API实例属性与方法特殊属性内置组件 安装vue 下载vue.js文件，在项目中引用 使用CDN（推荐链接到一个明确的版本号） 使用NPM手动搭建webpack（繁琐） ①：创建项目文件夹，并在文件夹中cmd ②：npmini Vuex学习总结 qq_46051400的博客 01-05 29 Vuex学习总结 Vuex是什么 Vuex是一个专为Vue.js应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个Vuex应用的核心就是store（仓库）。

“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state) 核心概念 首先我们需要知道vuex中有5个核心概念：State State 这里存放的对象必须是纯粹的对象(含有零个或多个的key/value对)。

在V vuex状态管理模式之Getters属性 iissoftware的博客 03-21 1万+ 上一节中我们讲到了state属性，它是组件数据的一个状态，今天我们来学习一下vuex中第二个属性getters。

那什么是Getters?它有什么作用？ Getters我们可以理解为store仓库的一个计算属性，它的作用主要是用来派生出一些新的状态。

比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用。

举个例子： store.js 此时，gett... vuex配置使用解析mutations响应式规则Vue.delete/set目录划分 weixin_42448623的博客 07-26 537 用处 vuex专门用于解决共享数据问题，是将数据提升到顶层，不过他使用了一些特别的技巧，不仅让组件的依赖更加清晰，当数据变动时，仅渲染依赖该数据的组件 注意：并非所有数据都需要用vuex管理，通常vuex只管理那些需要被组件共享的数据 在实际开发中，一些逻辑特别复杂的数据，尽管不共享，也可能提取到vuex中进行管理 使用 安装 npmivuex main.js配置 importvuexfrom'vuex' Vue.use(vuex) newvuex.Store({ //配置 }) new vue状态管理——vuex简单使用 halo1416的博客 07-30 1436 先来一张vuex官方的流程图： vuex流程理解： vuex中包括的对象有：state、mutations、actions、getters和modules。

在vuex流程中设及到的对象：Components、Actions、Mutations和State。

实现过程： 用户在component中通过操作dispatch触发了一个action，action就会commit一个muta... vuex的state,gettters,mutations,actions学习笔记 Little_Pig_Bug的博客 09-04 796 最近自己用vue全家桶写了一个微商城，下面我们将以这个讲解我的学习过程，截取部分代码。

具体请看https://github.com/LitterPig/test-vueApp 想要使用他们，首先得安装vuex，所以第一步就是安装vuex了。

。

。

。

。

。

1.安装vuex，会在我们的package.json里面的dependencies看到vuex安装信息 npminstallvuex... [Vuex系列]-初尝Vuex第一个例子 weixin_34290352的博客 04-21 42 Vuex是什么？Vuex是一个专为vue.js应用程序开发的状态管理库。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护，这就是Vuex背后的基本思想。

Vuex安装和引入安装Vuex依赖包npminstallvuex--save在项目中... VuexandTypescript weixin_33806300的博客 01-22 927 2018年9月30日，尤雨溪在medium个人博客上发布了vue3.0的开发思路。

3.0带了了很大的变化，他讲了一些改进的思路以及整个开发流程的规划。

对2.0有了全面的提升，并且源码全部用typescript重写，所以typescript刻不容缓。

本文章翻译自国外大牛FrancescoVitullo的文章，文章链接。

以下为翻译 最近，Typescript在Javascript生态系统中变得越来... ©️2022CSDN 皮肤主题：黑客帝国 设计师：我叫白小胖 返回首页 光仔December CSDN认证博客专家 CSDN认证企业博客 码龄8年 河南国龙电子商务有限公司 1053 原创 5153 周排名 185 总排名 296万+ 访问 等级 3万+ 积分 4759 粉丝 1070 获赞 1255 评论 2018 收藏 私信 关注 热门文章 【WebLogic使用】1.WebLogic的下载与安装 131045 【Redis缓存机制】1.Redis介绍和使用场景 85434 【OSGI】1.初识OSGI-到底什么是OSGI 69479 【Docker学习总结】8.Docker-查看和删除镜像 51322 【Shiro权限管理】10.Shiro为密码加盐 31301 分类专栏 vue入门与实战 68篇 SpringCloud全面入门学习 41篇 MyBatis+SpringMVC 81篇 Maven由浅入深 6篇 JavaScript的基础与DOM编程 27篇 MongoDb探究 9篇 osgi经典入门 6篇 SSH项目实战 35篇 Oracle基础与提高 12篇 JSP基础开发技术 37篇 Git快速使用和入门 6篇 Java虚拟机(JVM)探究 10篇 Hibernate框架学习 51篇 Java多线程与并发库 19篇 Spring框架学习 21篇 Struts2框架学习 24篇 Java邮件开发 7篇 Android开发技术 87篇 Shiro权限控制 21篇 蓝桥杯历届试题 31篇 Linux全面学习 16篇 手写RPC框架 13篇 Redis缓存机制 14篇 SpringBoot入门 16篇 RabbitMQ消息中间件 13篇 ----------------随便说说 杂谈 11篇 技术篇 2篇 算法小总结 9篇 ----------------软件开发 JAVA基础 6篇 Android开发 88篇 网页设计 3篇 Hibernate框架 53篇 JSP开发 49篇 Spring框架 28篇 SpringMVC整合MyBatis 52篇 SpringMVC 7篇 SpringBoot 16篇 MyBatis框架 23篇 Struts2框架 24篇 JavaScript 40篇 Ajax 9篇 jQuery 3篇 Maven 6篇 mongodb 9篇 OSGI 5篇 SQL 16篇 WebService 7篇 iReport 3篇 Dubbo 5篇 Zookeeper 3篇 Linux 17篇 Shiro权限管理 21篇 Nginx 3篇 Java邮件 7篇 javaEE项目实战 71篇 Java线程与并发 19篇 Activiti工作流 12篇 WebLogic 5篇 Git版本管理 6篇 设计模式 16篇 缓存机制 14篇 Web安全与防御 6篇 软件工程 6篇 FreeMarker 4篇 消息中间件 13篇 单点登录 Netty 7篇 FastDFS 6篇 JVM 10篇 Docker 12篇 RPC 13篇 SpringCloud 41篇 全文检索 5篇 Lucene 5篇 ----------------算法剖析 程序代码 83篇 蓝桥杯 31篇 第六届河南省程序设计大赛 1篇 北大夏令营笔记 10篇 排序 10篇 数学题 41篇 图论 14篇 贪心 7篇 字典树 3篇 母函数 2篇 高精度 6篇 字符串处理 19篇 模拟 4篇 线段树 4篇 动态规划DP 18篇 计算几何 2篇 数据结构 12篇 搜索 20篇 矩阵 7篇 背包问题 11篇 树 5篇 博弈论 1篇 并查集 3篇 STL 1篇 二分匹配 3篇 KMP 1篇 优先队列 3篇 哈夫曼编码 2篇 最新评论 【OSGI】2.走近OSGI-开发第一个Plug-in项目 光仔December: 如果您配置的是博文中的项目，可以对照一下各个Bundle的版本 【OSGI】2.走近OSGI-开发第一个Plug-in项目 啊汪汪汪: 如何降低支持的版本呢？ 【OSGI】2.走近OSGI-开发第一个Plug-in项目 光仔December: 会不会是其他配置有影响？或者某个Bundle版本太高只支持1.8版本jdk，需要调整为支持1.6的老版本 【OSGI】2.走近OSGI-开发第一个Plug-in项目 啊汪汪汪: 我使用的是jdk1.6并且MANIFEST.MF中显示Bundle-RequiredExecutionEnvironment:JavaSE-1.6，为什么validation显示Missingconstraint:RequiredExecutionEnvironment:JavaSE-1.8 【OSGI】4.实战OSGI-翻译助手项目02 光仔December: 感谢指出问题，谢谢支持 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 【VUE项目实战】42、添加商品分类功能（三） 【VUE项目实战】41、添加商品分类功能（二） 【VUE项目实战】40、添加商品分类功能（一） 2022年15篇 2021年44篇 2020年36篇 2019年49篇 2018年67篇 2017年69篇 2016年120篇 2015年395篇 2014年276篇 目录 目录 分类专栏 vue入门与实战 68篇 SpringCloud全面入门学习 41篇 MyBatis+SpringMVC 81篇 Maven由浅入深 6篇 JavaScript的基础与DOM编程 27篇 MongoDb探究 9篇 osgi经典入门 6篇 SSH项目实战 35篇 Oracle基础与提高 12篇 JSP基础开发技术 37篇 Git快速使用和入门 6篇 Java虚拟机(JVM)探究 10篇 Hibernate框架学习 51篇 Java多线程与并发库 19篇 Spring框架学习 21篇 Struts2框架学习 24篇 Java邮件开发 7篇 Android开发技术 87篇 Shiro权限控制 21篇 蓝桥杯历届试题 31篇 Linux全面学习 16篇 手写RPC框架 13篇 Redis缓存机制 14篇 SpringBoot入门 16篇 RabbitMQ消息中间件 13篇 ----------------随便说说 杂谈 11篇 技术篇 2篇 算法小总结 9篇 ----------------软件开发 JAVA基础 6篇 Android开发 88篇 网页设计 3篇 Hibernate框架 53篇 JSP开发 49篇 Spring框架 28篇 SpringMVC整合MyBatis 52篇 SpringMVC 7篇 SpringBoot 16篇 MyBatis框架 23篇 Struts2框架 24篇 JavaScript 40篇 Ajax 9篇 jQuery 3篇 Maven 6篇 mongodb 9篇 OSGI 5篇 SQL 16篇 WebService 7篇 iReport 3篇 Dubbo 5篇 Zookeeper 3篇 Linux 17篇 Shiro权限管理 21篇 Nginx 3篇 Java邮件 7篇 javaEE项目实战 71篇 Java线程与并发 19篇 Activiti工作流 12篇 WebLogic 5篇 Git版本管理 6篇 设计模式 16篇 缓存机制 14篇 Web安全与防御 6篇 软件工程 6篇 FreeMarker 4篇 消息中间件 13篇 单点登录 Netty 7篇 FastDFS 6篇 JVM 10篇 Docker 12篇 RPC 13篇 SpringCloud 41篇 全文检索 5篇 Lucene 5篇 ----------------算法剖析 程序代码 83篇 蓝桥杯 31篇 第六届河南省程序设计大赛 1篇 北大夏令营笔记 10篇 排序 10篇 数学题 41篇 图论 14篇 贪心 7篇 字典树 3篇 母函数 2篇 高精度 6篇 字符串处理 19篇 模拟 4篇 线段树 4篇 动态规划DP 18篇 计算几何 2篇 数据结构 12篇 搜索 20篇 矩阵 7篇 背包问题 11篇 树 5篇 博弈论 1篇 并查集 3篇 STL 1篇 二分匹配 3篇 KMP 1篇 优先队列 3篇 哈夫曼编码 2篇 目录 打赏作者 光仔December 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值