VUEX 的使用学习一

转载请注明出处:

一、Vuex是什么?

  介绍:Vuex 是一个专为 [Vue](http://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020).js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。他可以方便实现组件之间的数据共享

  理解:核心就是 store(仓库),仓库是用来干什么的?你就当它用来储存东西的。

 二、我们什么时候应该用到Vuex呢?

  a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余;

  b.中大型单页应用,因为要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择;

三、对于使用Vuex的理解是什么?

  由于Vue是单向数据流,子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

  但是这样会有一个问题,就是如果子组件 A 的父组件上面还有一层爷爷组件,或者还有更多祖父类型的层级,那么是不是会很麻烦。

  因此,我们会想到能不能我们将一个共有的数据存在一个特定的地方,用的时候自己去拿,这样就不需要一层层传值,于是乎 Vuex 就应运而生了。

  

 

 

 

四、vuex由五部分组成(五种状态/五种属性)

  

  • state: 数据

  • actions:可以包含异步操作

  • mutations: 唯一可以修改state数据的场所

  • getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)

  • modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter

  

五、安装配置

  第一步:npm i vuex --save/-S

  第二步: 创建store.js

  第三步:挂载使用 Vue.use(vuex)

  第四步:const store = new Vuex.Store({...配置项})

  第五步:导出 export default store

  第六步:导入main.js 在根实例配置 store 选项指向 store 实例对象

  具体操作步骤:

  安装

npm install vuex

  创建store.js 

import Vue from 'vue'
// 初始化一个vuex的实例(数据仓库) 导出即可
import Vuex from 'vuex'
import axios from 'axios'

// 使用安装
Vue.use(Vuex)

// 初始化,并声明:state,mutations,actions,getters等属性
export default new Vuex.Store({
  state: {
    // 所有的任务列表
    list: [],
    // 文本框的内容
    inputValue: 'aaa',
    // 下一个Id
    nextId: 5,
    viewKey: 'all'
  },
  mutations: {
    // 清除已完成的任务
    cleanDone(state) {
      state.list = state.list.filter(x => x.done === false)
    },
    // 修改视图的关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  },
  actions: {
    getList(context) {
      axios.get('/list.json').then(({ data }) => {
        // console.log(data)
        context.commit('initList', data)
      })
    }
  },
  getters: {
    // 统计未完成的任务的条数
    unDoneLength(state) {
      return state.list.filter(x => x.done === false).length
    },
  }
})

  把store对象挂载到Vue实例中,可以在main.js 中进行绑定

import store from './store.js'
import App from './App.vue'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

 

本文转载于网络 如有侵权请联系删除

相关文章

  • PHP和PHPINFO

    大家好,又见面了,我是你们的朋友全栈君。PHP开放源码和跨越平台,PHP可以运行在WINDOWS和多种版本的LINUX上。它不需要任何预先处理而快速反馈结果,它也不需要mod_perl的调整来使您的服务器的内存映象减小。PHP消耗的资源较少,当PHP作为ApacheWeb服务器一部分时,运行代码不需要调用外部二进制程序,服务器不需要承担任何额外的负担。关于PHP$_SERVER的一些使用方式$_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['REMOTE_ADDR']//当前用户IP。 $_SERVER['REMOTE_HOST']//当前用户主机名 $_SERVER['REQUEST_URI']//URL $_SERVER['REMOTE_PORT']//端口。 $_SERVER['SERVER_NAME']//服务器主机的名称。 $_SERVER['PHP_SELF']//正在执行脚本的文件名

  • Python手写回归树的实现代码分享一个

    x:1而在实际的使用过程中,发现popen不存在阻塞,即在执行一些长时间系统任务的时候,不会等待系统任务结束,python代码就会继续执行,在某些场景下会导致问题的出现。比如在我的一个场景中,要将一个文件夹中的文件删除,之后在重写一份文件,使用popen导致文件还没有删除,而代码继续执行使新文件已经写好,而这个时候popen又将我新写的文件删除,导致我的程序在后续出现bug。所以,如果没有可读性的要求,我建议优先使用system方法。print(bs.head)#获取head标签的所有内容:top.title(os.path.basename(f)+"-加密文本编辑器")python中遇到错误后,会引发异常。`money`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_0900_ai_ciDEFAULTNULL,285j=open('./json_data',mode='r')SCREEN.blit(BACKGROUND_IMAGE,(0,0))print(bs.a)#获取第一个a标

  • consul 的 HTTP API 和使用方法

    目录搭建起consulConsul的HTTPAPI建议读者先学习笔者的另一篇文章学习搭建Consul服务发现与服务网格-有丰富的示例和图片,这样了解consul大体的结构和学习集群搭建,摸清consul的服务注册发现配置方法。本文HTTPAPI请求使用postman测试,读者可以打开https://documenter.getpostman.com/view/5988188/TzCV4jqL查看HTTP文档,并可直接导入postman测试。搭建起consulConsul支持基础结构的服务注册和发现(称为内部服务),也支持外部服务(第三方SAAS服务以及无法直接运行Consul代理的其它环境,例如redis)。直接使用sudoapt-getinstallconsul命令即可安装consul,你也可以参考导读中笔者的另一篇文章,里面提到了详细的安装方法。然后我们使用命令启动consul:consulagent-dev-client0.0.0.0-enable-script-checks-node=web-ui复制上面配置指定了允许任何ip连接到此consul,-enable-script-

  • 为什么电子产品这么发达,而飞机外面不安装全方位监控呢?

    这是一个老生常谈的问题,飞机制造技术是一个技术门槛极高的行业,本身的竞争就不是特别大,全球真正意义上的民航客机,主要是美国的波音公司以及欧洲的空中客车公司,不像别的行业可以做到差异化非常明显,还属于高利润的行业所以对于厂家而言主要还是以保障安全为主,对于这种已经技术很成熟但是不是主要功能的点相对来讲不会太关注。飞机制造属于比较特殊的行业,飞机起飞和降落的时候都要关闭电子产品,就是为了防止电子产品产生的辐射对于飞机信号产生干扰,电子干扰对于手机信号的影响还是非常大的,从安全的角度考虑还是尽最大可能减少电子产品,所以摄像头之类的也会包含在内的,当然还有一个非常重要的因素,民航飞机对于质量的控制非常的严格,可以讲只要不是必须的设备,在飞机上坚决不会添加,所以乘客普遍的觉得飞机上的设备更新比较慢,特别是在别的交通设备更新速度非常快速的今天,飞机作为最快速的交通工具,到目前为主还是最快捷的交通方式,但是由于运行的在空中国对于安全系数的要求也是最高的,所以关注的重中之重还是安全系数,把功夫放在实际的安全上才是客机公司关注的中心,就拿飞机的舒适度来讲距离高铁还是差的很远,直接比较起来的意义不是很大。

  • python基础学习8----文件基本操

    一.文件的打开,open函数f=open(file_name,mode)#创建文件对象复制打开模式有很多种  1.'r': 以只读方式打开文件。文件的指针将会放在文件的开头。这是默认模式。  2.'r+': 打开一个文件用于读写。文件指针将会放在文件的开头,但写入内容会写到文件内容末尾。  3.'w': 打开一个文件只用于写入。如果该文件已存在则打开文件,并从开头开始编辑,即原有内容会被删除。如果该文件不存在,创建新文件。  4.'w+': 打开一个文件用于读写。如果该文件已存在则打开文件,并从开头开始编辑,即原有内容会被删除。如果该文件不存在,创建新文件。  5.'a': 打开一个文件用于追加。如果该文件已存在,文件指针将会放在文件的结尾。也就是说,新的内容将会被写入到已有内容之后。如果该文件不存在,创建新文件进行写入。  6.'a+': 打开一个文件用于读写。如果该文件已存在,文件指针将会放在文件的结尾。文件打开时会是追加模式。如果该文件不存在,创建新文件用于读写

  • 边缘计算(二)——边缘计算的类型与用途

    目前,市场上存在的边缘计算相关概念包括雾计算、边缘计算、多接入边缘计算/移动边缘计算、移动云计算等概念。雾计算思科最早于2012年在论文中提出概念,作为云计算的延伸,从而将计算需求分层次、分区域处理,以化解可能出现的网络堵塞现象。随后,思科在CiscoLive2014会议上发布了供开发者使用的于雾计算开发套件IOx。雾计算,是一种分布式的计算模型,作为云数据中心和物联网(IoT)设备/传感器之间的中间层,提供计算、网络和存储设备,让基于云的服务可以离物联网设备和传感器更近。“雾计算”的名字源自“雾是比云更贴近地面(数据产生的地方)”。雾计算环境由传统的网络组件,例如路由器、开关、机顶盒、代理服务器、基站等构成,可以安装在离物联网终端设备和传感器较近的地方。这些组件可以提供不同的计算、存储、网络功能,支持服务应用的执行。思科系统公司,ARM控股公司,戴尔公司,英特尔公司,微软公司和普林斯顿大学等于2015年11月19日成立了目前唯一的雾计算组织-OpenFog联盟,创建雾计算标准-OpenFog,以实现物联网(IoT)、5G和人工智能(AI)应用的数据密集型需求,促进雾计算的兴趣和发展。

  • Photoshop 2022 Mac(ps 2022)激活版

    Photoshop2022中文Mac版更新啦~photoshop简称ps,它是一款专业图像处理软件,此次更新软件可选择项目云服务生成更准确和高质量的图像;软件界面也有了新的中性UI颜色模式,视觉效果更加高级;对神经滤波器进行了改进:通过调整强度、饱和度和亮度设置,为创意工作流程中的图层带来色彩和亮度。Photoshop2022Macps2022电脑配置要求处理器:支持64位的Intel处理器;具有SSE4.2或更高版本的2GHz或更快的处理器 操作系统:macOSCatalina(版本10.15)或更高版本macOSBigSur(版本11)macOSCatalina(版本10.15) 内存:8GB16GB或更多 显卡:支持Metal的GPU 1.5GBGPU内存 支持Metal的GPU 4GB的GPU内存,用于4k及更大的显示器 硬盘空间:4GB可用硬盘空间;安装需要额外的空间 16GB可用硬盘空间;安装需要额外的空间 用于应用程序安装的快速内部SSD 额外的高速驱动器或SSD来设置暂存盘 处理器:基于ARM的AppleSilicon处理器 操作系统:macOSBigSur(版本11.

  • 统计在从1到n的正整数中1出现的次数

    问题: 给定一个十进制正整数N,写下从1开始,到N的所有整数,然后数一下其中出现的所有“1”的个数。 例如:N=2,写下1,2。这样只出现了1个“1”。 N=12,我们会写下1,2,3,4,5,6,7,8,9,10,11,12。这样,1的个数是5。  

  • js实现加减乘除 计算js丢失精度

    js实现加减乘除计算js丢失精度 /** *公用方法 */ /********应用于几乎所有页面***************/ /** *说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 返回值:arg1加上arg2的精确结果 *@param{*加数}arg1 *@param{*加数}arg2 *@param{*是否需要格式化}needFormat */ functionaccAdd(arg1,arg2,needFormat){ arg1=parseFloat(arg1+""); arg2=parseFloat(arg2+""); if(isNaN(arg1)){ arg1=0; } if(isNaN(arg2)){ arg2=0; } varresult=(arg1*100+arg2*100)/100; needFormat&&(result=keepDecimalFull(result,$ANumPosition)); returnparseFloat(result)===

  • 搭建redis-cluster集群是出现Waiting for the cluster to join...,一直是等待的解决办法

    如图: 刚开始也是在网上找了好久的帖子,最终也没能解决,细看之后发现我的cluster默认分配的集群节点的id都是一样的,造成了集群部署失败。 复制 因为我的6台机器都是一台机器编译安装之后拷贝过去的,第一台机器自动生成的node_6379.conf也一起拷贝过去了,造成集群自动部署是先找这个配置文件,而我的配置文件都是第一台机器的节点配置文件,故而失败。 解决方法: 删除每个节点自动生成的dump.rbd文件和node_6379.conf并且将每个redis初始化集群服务(如下图),重启各个redis服务重试! 复制

  • 微信公众号支付

    一、微信公众号支付   1、获取微信授权     详情查看微信文档,用户同意授权后,获取code,根据code获取access_token,因为access_token的时效性及安全级别系数比较高,因此我们将code传给后台,由后台获取到access_token,并获取到用户信息返回。   2.引入微信jssdk    varjweixin=require('@/common/jweixin-module');     因为项目有一个公众号,多商户支付的需求,我们在后台设置配置商户的商户号以及密钥。多商户支付,需要在同一公众号下,因此appId为统一公众号的appId,且所有的商户必须要申请授权在该公众号下支付。  3.通过config接口注入权限验证配置 jweixin.config({ debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会

  • Linux内核参数之arp_ignore和arp_announce

    背景介绍:搭建LVS-DR场景时,对arp_ignore和arp_announce参数很模糊,两个参数的配置直接影响到DR转发是否正常,整理学习一下。 arp_ignore和arp_announce参数都和ARP协议相关,主要用于控制系统返回arp响应和发送arp请求时的动作。   一、arp_ignore和arp_announce介绍 arp_ignore介绍: arp_ignore参数的作用是控制系统在收到外部的arp请求时,是否要返回arp响应。 Linux内核文档中对于arp_ignore的描述: arp_ignore-INTEGER DefinedifferentmodesforsendingrepliesinresponsetoreceivedARPrequeststhatresolvelocaltargetIPaddresses: 0-(default):replyforanylocaltargetIPaddress,configuredonanyinterface 1-replyonlyifthetargetIPaddressislocaladdres

  • Mysql优化,ICP、BNL算法、BKA算法、MMR算法

    ICP(IndexConditionPushdown,索引条件下推)是MySQL5.6版本中的新特性,是一种在存储引擎层使用索引过滤数据的一种优化方式。 出现原因:ICP出现Mysql5.6以前,Mysql查询数据是通过索引查询到主键数据,然后再根据数据行回到MysqlServer层做Usingwhere回表查询检索,这样子把查询回到了Mysql服务层中;Mysql5.6的ICP则是通过将此部分过滤条件直接放到存储引擎层完成,避免更多的回Mysql服务层做操作,通过存储引擎层把满足数据的行读取出 目的:ICP能减少引擎层访问基表的次数和MySQLServer访问存储引擎的次数,减少IO次数,提高查询语句性能;减少全行读取次数; 场景 索引列:user_id_user_name(user_id,user_name) descselect*fromuserwhereuser_id=1anduser_namelike'%23%'; descselectuser_idfromuserwhereuser_id=1anduser_namelike'%23%'; ICP开启时的执行计划含有

  • ES6 箭头函数

    箭头函数 定义 我觉得箭头函数就是将es5中的普通函数换一种写法,使代码看起来更加简洁 基本方法 1、简单例子 varf=v=>v; console.log(f("箭头函数"));//箭头函数 复制 上面的代码等同于 varfunction(v){ returnv; } console.log(f("普通函数"));//普通函数 复制 2、箭头函数不需要参数或者需要多个参数时,用圆括号代表参数部分 varf=()=5; //等同于 varf=function(){ return5; } 复制 varsum=(num1,num2)=>num1+num2; //等同于 varsum=function(num1,num2){ returnnum1+num2; } 复制 3、箭头函数的代码部分多于一条语句,就要用大括号将其括起来,并使用return语句返回,返回的是对象,就必须在对象外面加上括号 varsum=(num1,num2)=>{returnnum1+num2}; vargetId=id=>({id:id,name:"aaaa"})//返回的是对象 复制 4、简

  • 3.2.10 有多少文本会改动

      有个问题我们一直没讨论到:有多少文本会匹配?事实上,这应该包含两个问题。第二个问题:从哪开始匹配?执行简单的文本查找,例如使用grep 或egrep 时,则这两个问题都不重要,你只要知道是否有一行是匹配的,若有,则看看那一行是什么。至于在这个行里,是从哪儿开始匹配,或者它扩展到哪里,已经不重要了。     但如果你要使用 sed 执行文本替换,或者要用 awk 写程序,这两个问题的打哪就变得非常重要了(如果你每天都在文本编辑器内工作,这也算是个重要议题,只是本书的重点不在文本编辑器)。     这两个问题的答案是:正则表达式匹配可以匹配整个表达式的输入文本中最长的、最左边的子字符串。除此之外,匹配的空(null)字符串,则被认为是比完全不匹配的还长(因此,就像我们先前所解释的,正则表达式:ab*c匹配文本ac,而b* 则成功地匹配于a 与 c 之间的 null 字符串)。再者,POSI

  • SpringBoot之——log4j日志配置案例

    转载请注明出处:https://blog.csdn.net/l1028386804/article/details/80464909 在创建SpringBoot工程时,我们引入了spring-boot-starter,其中包含了spring-boot-starter-logging,该依赖内容就是SpringBoot默认的日志框架Logback,所以我们在引入log4j之前,需要先排除该包的依赖,再引入log4j的依赖,就像下面这样: 一、引入log4j依赖 <!--忽略自带的日志框架.--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-b

  • MySQL 序列使用

    MySQL序列使用   MySQL序列是一组整数:1,2,3,...,由于一张数据表只能有一个字段自增主键,如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现。

  • Powerpoin怎么制作电子相册|PPT制作电子相册教程

      Powerpoin怎么制作电子相册?你是不是也对这一问题颇感兴趣呢?下面小编就为大家带来PPT制作电子相册详细教程,赶紧准备好你的自拍照什么的,开启Powerpoin制作电子相册之旅吧! Powerpoin(PPT)制作电子相册教程 打开相册模板 替换照片 所有照片都替换完成之后,可以选择另存相册,则可以保留原相册模板。打开菜单栏的“文件”选项,然后选择另存为,就可以在弹出的另存对话框内对相册进行命名再保存。ppt相册就初步成型了。 保存PPT相册 打开狸窝PPT转换器,通过主界面上的“添加”按钮,把我们刚制作好的ppt相册导入软件。 导入相册 狸窝PPT转换器还可以给电子相册添加背景音乐,点击自定义按钮,进入“背景音乐”选项,就可以添加一首或多首歌曲作为电子相册的背景音乐。 背景音乐 设置电子相册的视频格式,若是用于网络传播的建议大家选择flv格式,若是需要刻录DVD光盘的,则可以使用vob格式,还可以直接根据播放设备选择视频格式。 转换为电子相册 最后点击软件右下角的“Start”按钮,软件就会运行把ppt转换为电子相册。 转换成视频 转换完成

  • ContentProvider 使用详解

    和你一起终身学习,这里是程序员Android 本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容: 一、ContentProvider概述 二、ContentProvider的注册 三、自定义ContentProvider的实现 四、获取联系人ContactProvider实现的方法 五、获取短信内容的实现方法 六、ContentResolver内容解析者 七、ContentObserver内容观察者 八、ContentProviderContentResolverContentObserver三者关系 一、ContentProvider概述 在了解ContentProvider之前,我们首先了解一下ContentProvider的继承关系。 ContentProvider继承关系如下: java.lang.Object    ↳android.content.ContentProvider 复制 ContentProvider是Android四大组件之一,其本质上是一个标准化的数据管道,它屏蔽了底层的数据管理和服务等

  • Mqtt消息服务器 moquette

    在github找了个IOT的消息服务器 https://github.com/moquette-io/moquette 代码没有测试,因为公司没机会让我实践 可以二次开发的,我自己二次开发了一下   验证用户名和密码publicclassDBAuthenticatorimplementsIAuthenticator{   @Override   publicbooleancheckValid(StringclientId,Stringusername,byte[]password){       //CheckUsername/PasswordinDBusingsqlQuery             SqlSessionsqlSession=null;    &nbs

  • 数组操作类

    classArrayHelper{ /** *从数组中删除空白的元素(包括只有空白字符的元素) * *用法: *@codephp *$arr=array('','test',''); *ArrayHelper::removeEmpty($arr); * *dump($arr); *//输出结果中将只有'test' *@endcode * *@paramarray$arr要处理的数组 *@paramboolean$trim是否对数组元素调用trim函数 */ staticfunctionremoveEmpty(&$arr,$trim=TRUE) { foreach($arras$key=>$value) { if(is_array($value)) { self::removeEmpty($arr[$key]); } else { $value=trim($value); if($value=='') { unset($arr[$key]); } elseif($trim) { $arr[$key]=$value; } } } } /** *从一个二维数组中返回指定键的

相关推荐

推荐阅读