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. Ubuntu更换硬盘

    0x00 背景: 目前ubuntu用的是一个80g的硬盘( 一开始没买硬盘,直接拆了一个老老老老的机子来用),系统16.04, 只有一个/分区 ( /dev/sdb1 ) . 新的硬盘是一块256G的 ...

  2. IEC_62304_CheckList

    IEC 62304 Reference Software Lifecycle Process Applicable for Class A Class B Class C PRIMARY LIFECY ...

  3. Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)

    前言:本文是我撰写的关于搭建“Nginx + PHP(FastCGI)”Web服务器的第6篇文章.本系列文章作为国内最早详细介绍 Nginx + PHP 安装.配置.使用的资料之一,为推动 Nginx ...

  4. C# 多维数组 交错数组的区别,即 [ , ] 与 [ ][ ]的区别

    多维数组的声明 在声明时,必须指定数组的长度,格式为 type [lenght ,lenght ,lengh, ... ] int [,] test1 = new int [3,3]; 或声明时即赋值 ...

  5. scala简介

    1.什么是Scala scala官方网址: http://www.scala-lang.org Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行 ...

  6. Linux性能监控(程序篇)

    性能数据的监控,除了针对整机进行外,还要求我们对某一运行的程序单独进行.常用的程序监控命令有ps和top. Ps ps命令最常用的还是用于监控后台进程的工作情况,因为后台进程是不和屏幕键盘这些标准输入 ...

  7. 安卓原生与hml交互(WebView基础)

    WebView加载页面 webView有两种加载方式, 加载网络地址 webView.loadUrl("www.xxx.com/index.html"); 加载本地资源 webVi ...

  8. PyCharm创建虚拟环境 和 TVTK库的安装

    注:示例系统环境:Windows10 64位 + Anaconda3: 昨天安装TVTK库遇到些麻烦,当时随便将库下到个文件夹安装后(没找到VENV文件夹...), 进行测试:from tvtk.to ...

  9. BZOJ2761:[JLOI2011]不重复数字(map)

    Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 18 3 19 ...

  10. [USACO09MAR]Sand Castle

    嘟嘟嘟 太水了,大佬们就绕道吧…… 就是m, b数组分别排个序,然后更改对应位置的m[i]和b[i],就行了. 因为如果m[i]不改为b[i]而是b[i + 1]的话,那么必定要将m[j] (j &g ...