Vuex简单入门

1.Vuex是什么？

学院派：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。

理解：以上这4个词是我们理解的关键。状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。管理：除了存储，还可以管理数据，也就是计算、处理数据。所有组件状态：所用的组件共用一个仓库（Store），也就是一个项目只有一个数据源（区分模块modules）。

总结：Vuex就是在一个项目中，提供唯一的管理数据源的仓库。

2.有什么用？使用场景？

场景一：处理多组件依赖于同一个数据，例如有柱状图和条形图两个组件都是展示的同一数据；

场景二： 一个组件的行为——改变数据——影响另一个组件的视图，其实也就是公用依赖的数据；

Vuex将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（getter）数据，也容易设置数据（setter）。

3.源码初览

这是Vuex的源码文件，总共包含五大部分，Plugins两个注入文件，核心文件index，帮组文档helper，工具文件util.js

我们先看看Index.js文件export的框架，后面具体分析。

   export default {
     Store,
     install,
     mapState,
     mapMutations,
     mapGetters,
     mapActions
           }

后面文章分析Store仓库。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实战之Vuex的入门教程

    Vue.js实战之Vuex的入门教程

    前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App

  • 如何快速上手Vuex

    如何快速上手Vuex

    在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速.vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会觉得这就是Mvc库呢,实则不然,因为他还差一个重要的C(也就是控制器).以下是鄙人对Mvc的个人理解,如有失误还请各位道友指正. M:模型用于表示各种事物及事物特性的数据 v:view + viewModel,此处鄙人认为v不能单纯的理解为视图,而应该是视图+视图模型. c:控制器,用于协调M与v之

  • Vuex和前端缓存的整合策略详解

    如何存放或更新缓存? 缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的. 我们期望这个过程更自然一点,通过某种变化自动映射,使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化. Vuex的插件可以拦截 mutations,借助这个机制,我们可以制定一种策略化的规则. 可以规定,所有需要更新缓存的 mutationType 都要符合这种格式:module-type-cacheKey,非缓存的 mutationType 格式为 module-type. 那么就可以拦

  • Vuex简单入门

    Vuex简单入门

    1.Vuex是什么? 学院派:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式:集中存储和管理应用的所有组件状态. 理解:以上这4个词是我们理解的关键.状态:什么是状态,我们可以通俗的理解为数据.Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据.集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存储,视图和数据就可以分析.管理:除了存储,还可以管理数据,也就是计算.处理数据.所有组

  • python中Flask框架简单入门实例

    本文实例讲述了python中Flask框架的简单用法.分享给大家供大家参考.具体如下: 使用Flask框架的简单入门范例代码,如果你正学习Flask框架,可以参考下面的启动代码,这段代码可以在网页上输出"hello world" import os # Using Flask since Python doesn't have built-in session management from flask import Flask, session app = Flask(__name_

  • C# WCF简单入门图文教程(VS2010版)

    C# WCF简单入门图文教程(VS2010版)

    在这个例子中我们将使用VS2010创建一个WCF服务,其中会了解[DataContract][ServiceContract]等特性. 内置的WCFSVCHost,并使用"WCF测试客户端"来测试我们创建的服务. 注意下面的所有类.接口及方法都添加了public的访问级别. 一.建立一个WCF服务库 创建一个WCF服务库项目 在解决方案中会自动为我们生成两个类文件"IService1.cs"和"Service1.cs". 这两个类文件是两个WCF

  • jQuery简单入门示例之用户校验demo示例

    jQuery简单入门示例之用户校验demo示例

    本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可

  • ActiveMQ简单入门(新手必看篇)

    一.创建一个简单的Hello World案例 首先需要导入activemq-all-5.14.5.jar包,写生产端: package com.ietree.mq.helloworld; import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms.DeliveryMode; import javax.jms.Destination; import javax.jms.MessageProduc

  • Java Spring开发环境搭建及简单入门示例教程

    本文实例讲述了Java Spring开发环境搭建及简单入门示例.分享给大家供大家参考,具体如下: 前言 虽然之前用过Spring,但是今天试着去搭建依然遇到了困难,而且上网找教程,很多写的是在web里使用Spring MVC的示例,官方文档里的getting start一开始就讲原理去了(可能打开的方法不对).没办法,好不容易实验成功了,记下来免得自己以后麻烦. 添加依赖包 进入spring官网,切换到projects下点击 spring framework.官网上写的是以maven依赖的形式写

  • JCrontab简单入门实例详解

    JCrontab简单入门实例详解

    本文实例为大家分享了JCrontab简单入门,供大家参考,具体内容如下 创建一个JavaWeb项目 1.首先要下载JCrontab的相关jar包,Jcrontab-2.0-RC0.jar.放到lib文件夹下. 2.在src下新建文件jcrontab.properties如下: #crontab.xml 文件的目录,这个是作业调度规则 org.jcrontab.data.file =E:/EclipseWorkspace/ADemo/WebContent/WEB-INF/crontab.xml #

  • 基于vue-cli、elementUI的Vue超简单入门小例子（推荐）

    这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Pro

  • Docker简单入门使用教程

    前言: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的Linux或Windows机器上.近几年来,Docker 在国内发展的如火如荼,特别是在互联网公司, Docker 的使用是十分普遍的,极大提高了应用的维护效率,降低了云计算应用开发的成本.本篇文章主要是带你入门Docker,介绍Docker的安装及简单使用. 1.安装Docker 想要学习Docker,我们首先要安装Docker,从 17.03 版本之后分为 CE(Co

  • python Matplotlib数据可视化（1）：简单入门

    1 matplot入门指南 matplotlib是Python科学计算中使用最多的一个可视化库,功能丰富,提供了非常多的可视化方案,基本能够满足各种场景下的数据可视化需求.但功能丰富从另一方面来说也意味着概念.方法.参数繁多,让许多新手望而却步. 据我了解,大部分人在对matplotlib接触不深时都是边画图边百度,诸如这类的问题,我想大家都似曾相识:Python如何画散点图,matplotlib怎么将坐标轴标签旋转45度,怎么设置图例字体大小等等.无论针对哪一个问题,往往都有多种解决方法,搜索

随机推荐