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. [CentOS]安装软件问题:/lib/ld-linux.so.2: bad ELF interpreter解决

    环境: [orangle@localhost Downloads]$ uname -m&&uname -r x86_64 2.6.32-220.el6.x86_64 [orangle@ ...

  2. (转)informatica 面试题大全

    1 What is the difference between a data warehouse and a data mart? Ø Dataware house: It is a collect ...

  3. Azure 中快速搭建 FTPS 服务

    FTP,FTPS 与 SFTP 的区别 FTP (File Transfer Protocol)是一种常用的文件传输协议,在日常工作中被广泛应用.不过,FTP 协议使用明文传输.如果文件传输发生在公网 ...

  4. windows更新文件和windows.old文件夹清理

    在对Windows系统进行升级之后会发现C盘多出一个Windows.old文件夹,直接点击删除缺没有权限,不能进行删除. 在对window进行修复补丁时会产生大量的补丁更新文件,有时不清楚文件存在在哪 ...

  5. Vscode rg.exe cpu 占用过高

    文件-> 首选项 -> 设置 -> 搜索search.followSymlinks 或者 修改settings.json 添加 "search.followSymlinks ...

  6. 沉淀,再出发:web前端的一些认识

    沉淀,再出发:web前端的一些认识 一.前言 作为程序员,我一直认为全栈是一种最基本的能力,没有了这种目标就会发现自己越往后面发展路就越窄,很多自己不了解的东西会阻塞自己去理解整个系统的开发过程和效率 ...

  7. 使用PowerShell批量注册DLL到GAC

    一段很小的代码,注册当前目录下所有的DLL到GAC,请先把gacutil.exe复制到同一个目录. $Path = Get-Location $Dir = Get-ChildItem "$P ...

  8. 并发集合 System.Collections.Concurrent 命名空间

    System.Collections.Concurrent 命名空间提供多个线程安全集合类. 当有多个线程并发访问集合时,应使用这些类代替 System.Collections 和 System.Co ...

  9. linux服务器安全配置10大技巧

    1.禁止ping/etc/rc.d/rc.localecho 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all2.对用户和口令文件进行权限控制chmod 6 ...

  10. js布局库

    1.viz.js The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten ...