手把手教你使用Vuex(一)
vuex 是一个专门为vue.js应用程序开发的状态管理模式。


3.五种默认基本对象
- state:存储状态(全局变量) $store.state.变量名
- getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions:异步操作。在组件中使用是$store.dispath('')
- modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

4.使用
4.1 以分开文件的vuex说明:
vue2.x版本使用Vuex
一、在store/index.js中引入这些文件和Vue,Vuex。Vue.use(Vuex);将vuex从根组件“注入”到每一个子组件中.然后把属性加在vuex对象中
二、在src/main.js中引入store
vue3.x版本使用Vuex
store/index.js中注入Vuex会有变化,主要原因是创建实例方式改变,一些全局的 api 方法也不在全局上了,而是放到了实例上。
不过放在store/index.js下有些繁琐,main.js也需要引用,不如直接放在main.js中,如下
4.2 state中全局变量使用
创建:
store/state.js中创建一个变量count,变量名按需起名,我这只是个
调用:
在html中调用和在函数中调用
输出结果:
vuex系列:
手把手教你使用Vuex(一)
手把手教你使用Vuex(一)的更多相关文章
- 手把手教你使用Vuex(三)
2.mutation属性 了解: mutation是更改Vuex的store中的状态的唯一方法.非常类似于事件,官网说的"每个mutation都有一个字符串的事件类型和一个回调函数" ...
- 手把手教你使用Vuex(二)
在上一篇文章Vuex(一)中我们已经把Vuex需要用到的属性的单独页面引入到了store/index.js里面,所以我们接下来直接在这些js文件中写自己需要的代码就好. 1.Getter 了解:Get ...
- 手把手教你使用Vuex(四)
3.Action Action类似于mutation,不同之处在于: Action提交的是mutation,而不是直接变更状态 Action可以包含任何异步操作 可以理解为将mutations里面处理 ...
- 手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...
- 手把手教你做个人 app
我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)
前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)
前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...
随机推荐
- 记录一次源码扩展案列——FastJson自定义反序列化ValueMutator
背景:曾经遇到一个很麻烦的事情,就是一个json串中有很多占位符,需要替换成特定文案.如果将json转换成对象后,在一个一个属性去转换的话就出出现很多冗余代码,不美观也不是很实用. 而且也不能提前在j ...
- hashCode()方法源码分析
执行代码 public class Demo06 { public static void main(String[] args) { String s="hello"; Syst ...
- 本地环境Django配置问题
Django本地环境出现的问题 当你的前端出现这个问题的时候 你只需要吧setting.py 中的DEBUG 改为 True,即可 我原来是是DEBUG = False 本人亲测有用!!!
- gin框架使用orm操作数据库(转)
简介:orm俗称关系对象模型,用来映射数据库SQL和对象的工具 ,相当于mongodb里面的mongoose库,Java里面的mybatis ibatis Golang GORM使用 https: ...
- request-html 使用
from requests_html import HTMLSessionsession = HTMLSession()resp = session.get('http://www.spbeen.co ...
- oracle统计同一字段0和1
SELECT 班级表.班级编号,班级表.班级名称,SUM(DECODE(性别, '1', 1)) 女生人数,SUM(DECODE(性别, '0', 1)) 男生人数FROM 学生表, 班级表WHERE ...
- sql 删除所有存储过程
1.执行以下sql语句即可删除所有存储过程 --/**********删除所有存储过程*************************/-- use 数据库名 go declare @tname v ...
- C# Timer用法及实例讲解
摘自:http://www.cnblogs.com/xcsn/archive/2013/05/10/3070485.html 1.C# Timer用法及实例详解 http://developer.51 ...
- 主流开源分布式图数据库 Benchmark
本文由美团 NLP 团队高辰.赵登昌撰写 首发于 Nebula Graph 官方论坛:https://discuss.nebula-graph.com.cn/t/topic/1377 1. 前言 近年 ...
- python3配置socks5代理进行爬取
一.代码 #!/usr/bin/python # -*- coding: UTF-8 -*- import requests import socket import socks SOCKS5_PRO ...