1.什么是Vuex:
            Vuex是一个专为Vue.js应用程序开发的状态管理模式。
    2.使用Vuex的原因:
            当我们遇到多个组件共享状态时,多层组件的传值非常繁琐,不利于维护,因此我们把组件的共享状态抽取出来,以一个单例模式管理,在这种模式下,不管在哪个组件都可以获取状态或触发行为
    3.什么情况下使用:
            <1>虽然Vuex可以帮助我们管理共享状态,但是也附带了更多的概念和框架,增加了学习成本,所以决定是否要使用Vuex要对短期和长期效益进行权衡。
            <2>如果应用够简单,最好不要使用Vuex;如果需要构建一个中大型单页应用,可以考虑使用Vuex去更好的再组件外部管理状态。
    4.如何使用Vuex:
            <1>每一个Vuex应用的核心就是store(仓库),它包含着应用中大部分的状态(state),store是内存机制,而不是缓存机制,当前页面一旦刷新挥着通过路由跳转亦或是关闭,都会导致store初始化。
            <2>Vuex的核心概念分别是:
                    (1)State: 存放基本数据   ----辅助函数mapState: 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。
                    (2)getters:是从store中的state派生出来的状态,专门来计算state中的数据,相当于state中数据的计算属性  ---辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,与state类似
                   (3)actions:  是专门操作异步请求的数据和业务逻辑的地方,它不能直接变更state中的状态,而是通过commit来调用mutations里的方法来改变state里的数据。 ---辅助函数mapActions 将组建的methods映射为store.dispath调用
                    (4)mutations:提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的,如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数,提交载荷作为第二个参数。 ---辅助函数mapMutations 将组建中的methods映射为store.commit调用。
                    (5)Moules:使用单一状态树,导致应用的所有状态几种到一个很大的对象,但是,当应用变得很大时,store对象会变得臃肿不堪,为了解决以上问题,Vuex允许我们将store分割到模块(modules)。每个模块拥有自己的state、mutations、avtions、grtters。
            <3>当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会 有一个commit方法,当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数,这样就可以在mutations里面进行state的数据修改 ,当数据修改完毕后,会传导给页面。页面的数据也会发生改变

简述对Vuex的理解的更多相关文章

  1. vuex深入理解 modules

    一.什么是module? 背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理 ...

  2. vuex 深入理解

    参考自:https://mp.weixin.qq.com/s?src=11&timestamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...

  3. 关于vuex的理解

    刚开始学vue的时候,看到很多项目都有用vuex,抱着一种好奇的心态去看下vuex的官方文档,如下: Vuex官方文档 Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...

  4. 转一篇关于vuex简单理解的文章

    学习vuex半天摸不着头脑无意间发现了这篇文章 对vuex做了一个简单的阐述比较有助于我的理解 现在分享出来希望能给一些朋友一点帮助  这个是原文地址 http://www.ituring.com.c ...

  5. vuex简单化理解和安装使用

     1.简单化理解 首先你要明白 vuex 的目的 就是为了 集中化的管理项目中 组件所有的 数据状态 (state) 0. 第一步你要明白 , store 的重要性 , store 类似一个中央基站, ...

  6. Vuex的理解以及它的辅助函数

    理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...

  7. Vuex之理解Getters的用法

    一.什么是getters在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用 ...

  8. vuex的理解

    首先需要了解vuex的基本概念和使用方式,vue的官网也有很详细的说明或者浏览:https://zhuanlan.zhihu.com/p/24357762. vue是单页应用所以当页面刷新时vuex的 ...

  9. Vuex深入理解

    store下的index.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let store = new Vuex.St ...

随机推荐

  1. C#中的基础数据类型

    一.C#有15个预定义类型,13个值类型,两个引用类型(string和object): 1.整型 int a=15; short a=15; 2.浮点类型 float a=12.9; double a ...

  2. WCF--找不到具有绑定 BasicHttpBinding 的终结点的与方案 https 匹配的基址。注册的基址方案是 [http]。

    <system.serviceModel> <services> <service name="xxxxx.xxxxxx"> <endpo ...

  3. ionic项目编译打包(android平台)

    ionic项目相关开发工作完成之后(建立ionic工程项目可以参考上一篇文章ionic项目工程建立),就可以进行项目的编译打包apk应用包. 打包编译需要在平台环境下,这里只记录下android平台打 ...

  4. SQL Server ->> 高可用与灾难恢复(HADR)技术之 -- Windows故障转移群集

    WSFC 群集 (WSFC cluster)“Windows Server 故障转移群集”(WSFC) 群集是一组独立的服务器,它们共同协作以提高应用程序和服务的可用性. 故障转移群集实例 (Fail ...

  5. iOS设计模式 - 策略

    iOS设计模式 - 策略 效果 说明 1. 把解决相同问题的算法抽象成策略(相同问题指的是输入参数相同,但根据算法不同输出参数会有差异) 2. 策略被封装在对象之中(是对象内容的一部分),策略改变的是 ...

  6. linux下安装apache与php

    http://www.92csz.com/study/linux/16.htm 1.apache 在如下页面下载apache的for Linux 的源码包 http://www.apache.org/ ...

  7. redis-day1

    1 Redis 概述 REmote DIctionary Server(Redis)是一个基于key-value键值对的持久化数据库存储系统.redis和大名鼎鼎的Memcached缓存服务软件很像, ...

  8. Microsoft Visual Studio 遇到了问题需要关闭

    新年刚来Microsoft Visual Studio就找麻烦,debug的时候如果不打断点可以正常跑过,一打断点就崩溃,重启.报的问题是:Microsoft Visual Studio 遇到了问题需 ...

  9. Manjaro 更新vim插件或者系统后 YCM失效

    manjaro 更新之后,ycm总会多少有些毛病: 第一次遇到的问题: PluginUpdate之后ycm失效.使用命令:YcmToggleLogs查看ycmd_39047_stderr_Pp1GpB ...

  10. Python正则表达式(总)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6445044.html 本文出自:[Edwin博客园] Python正则表达式(总) search(patte ...