vuex快速入门
vuex是什么?
vuex是一个专门为vue.js应用程序开发的状态管理模式。
vuex默认的五种基本的对象:
state:存储状态(可以理解为变量)可以从计算属性中返回某个状态
getters:通常用在数据的二次处理(过滤数据...),可以理解为state的计算属性
mutations:修改状态,并且是同步的。
actions:异步操作。
modules: Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter 用法其实和上面是一样的。
vuex的安装:
使用命令行工具输入 npm install vuex --save
安装完成之后 第一步:创建vuex文件夹,在vuex文件夹里面创建一个名为store.js的文件
第二步:在store.js文件里面导入vue和vuex (注意变量名是大写Vue和Vuex)
import Vue from 'vue'
import Vuex from 'vuex'
然后可以通过两种方法暴露方法
方法一:(常用,在对象里面方法很多的情况下这样的写法也是最方便管理的)
方法二:(也有部分人直接在输出里面写,两个方法最终结果都一样,只是第一种方法更加方便管理)
第三步:在main.js中引入store.js
接下来我们在一个页面中去使用:如
说明:$store为Vuex的文件名,state为对象名,count为对象的方法名(其他一样)
这样就能在页面上显示了:
说明使用成功。
现在我们已经正常使用了vuex中的state,接下来我们 操作这个值 就要用到 mutations 和 actions 了
首先是mutations
在store.js文件中定义mutations对象,设置参数,第一个默认为state,接下来的为自定义参数。
然后在mutations中定义两个方法,增加和减少,并且设置一个参数n,默认值为0
接下来在页面上使用这个方法:(要注意,在父子组件中才有效果,因为commit方法就是vue里面给父子组件用的)
这样就可以在页面上进行操作这个值了
默认显示的值
点击一次增加后的值
重置为默认值之后点击一次减少之后的值
接下来就是actions,actions是异步操作
在store.js文件中定义mutations对象这里我在两个方法中使用了两个不同的参数,一个是context,它是一个和store对象具有相同对象属性的参数。在第二个函数中,使用了commit
要注意这两种方法的写法区别
然后在页面中写入如下内容:(为了和上面的操作有区别,传递参数设置为10作为区分。)
效果图:(不再一一列举)
接下来是是getters,getters算是非常简单的了。
我们一般使用getters来获取我们的state,因为它算是state的一个计算属性、
还是在store.js文件中定义,
然后在页面中使用:
结果:
到这里,vuex基础知识就差不多了,欢迎指点错误。
vuex快速入门的更多相关文章
- vue学习【四】vuex快速入门
大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...
- vue2.0项目实战(5)vuex快速入门
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vuex 快速入门( 基于vue2.0,vue1.0未知可否)
1.原理概述 2.用户登录例子解析: 由上图可以看到: 1.组件的数据是username,我们把它以name放在state中: 2.更改name发生在mutations的回调里,事件名字是showUs ...
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- vue 快速入门 系列 —— vue 的基础应用(上)
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- vue 快速入门 系列 —— vue-cli 上
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— vue-cli 下
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
随机推荐
- Django的的安装和配置
1. 下载 1. 命令行 pip install django==1.11.18 -i https://pypi.douban.com/simple/ 2. 创建项目 1. 命令行 django-ad ...
- 10-pymysql的应用
import pymysql # user = input('请输入用户名:') # pwd = input('请输入密码:') # 1.创建连接 conn = pymysql.connect(hos ...
- Spark学习之路(十四)—— Spark Streaming 基本操作
一.案例引入 这里先引入一个基本的案例来演示流的创建:获取指定端口上的数据并进行词频统计.项目依赖和代码实现如下: <dependency> <groupId>org.apac ...
- 【dockerFile配置jvm 启动参数】dockerFile 参数解释
最近比较忙,实际也没有用得上.仅仅记录几个链接: Dockerfile reference:https://docs.docker.com/engine/reference/builder/#usag ...
- 【设计模式】行为型04迭代器模式(Iterator Pattern)
学习地址:http://www.runoob.com/design-pattern/iterator-pattern.html 迭代器模式,简单来说就是通过迭代的方式对集合进行遍历,在集合的学习中也一 ...
- mysql的配置和启动命令
一.mysql配置文件在linux系统下的位置 使用命令查询位置: 1.找到安装位置 which mysql -> /usr/bin/mysql 2.接下来就可以针对这个目录通过一些命令查看配 ...
- Codeforces Gym101170J:Jupiter Orbiter(最大流)
题目链接 题意 有n次事件,q个队列,s个传感器.每个传感器接到一个队列,每个队列有一个容量. 接下来执行n次事件,每次事件都会有一个最大发送数据量d.和s个数据a,代表这次给每个s填入a的数据量. ...
- 安装Win10,ERROR_0x8007025D问题解决
Windows10安装的时候,出现ERROR CODE:0x8007025D 大概提示为:windows 无法安装所需的文件.请确保安装所需的所有文件可用,并重新启动安装. 本人在出现这个问题的原因, ...
- Win10自动更新关闭方法
一.为什么很多人会选择禁用Win10自动更新? 1.win10自动更新定义: Win 10的自动更新功能,即 Windows Update.这项功能本意是为一些软件.漏洞等提供更新服务.一般来说,只要 ...
- Java项目案例之---开灯(面向对象复习)
开灯(面向对象复习) 设计一个台灯类(Lamp)其中台灯有灯泡类(Buble)这个属性,还有开灯(on)这个方法 设计一个灯泡类(Buble),灯泡类有发亮的方法 其中有红灯泡类(RedBuble)和 ...