1.定义

  vuex 是一个专门为vue.js应用程序开发的状态管理模式。   

  这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。
2.安装
  (1)利用npm包管理工具安装 npm install vuex --save   不会自动生成文件
  (2)使用vue指令add安装 vue add vuex           会自动生成文件
 
   vue3.x的vuex
    
   vue2.x的vuex

3.五种默认基本对象

  • state:存储状态(全局变量) $store.state.变量名
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
  这些对象可以在store/index.js里写到一起,如上截图,如果处理比较多的话写在一起还是很乱的,可以分开来写,如下
  

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(三)

      手把手教你使用Vuex(四)

    深入vuex戳这里

手把手教你使用Vuex(一)的更多相关文章

  1. 手把手教你使用Vuex(三)

    2.mutation属性 了解: mutation是更改Vuex的store中的状态的唯一方法.非常类似于事件,官网说的"每个mutation都有一个字符串的事件类型和一个回调函数" ...

  2. 手把手教你使用Vuex(二)

    在上一篇文章Vuex(一)中我们已经把Vuex需要用到的属性的单独页面引入到了store/index.js里面,所以我们接下来直接在这些js文件中写自己需要的代码就好. 1.Getter 了解:Get ...

  3. 手把手教你使用Vuex(四)

    3.Action Action类似于mutation,不同之处在于: Action提交的是mutation,而不是直接变更状态 Action可以包含任何异步操作 可以理解为将mutations里面处理 ...

  4. 手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01

            猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...

  5. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  6. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  7. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)

    前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...

  8. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  9. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

    前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...

随机推荐

  1. 记录一次源码扩展案列——FastJson自定义反序列化ValueMutator

    背景:曾经遇到一个很麻烦的事情,就是一个json串中有很多占位符,需要替换成特定文案.如果将json转换成对象后,在一个一个属性去转换的话就出出现很多冗余代码,不美观也不是很实用. 而且也不能提前在j ...

  2. hashCode()方法源码分析

    执行代码 public class Demo06 { public static void main(String[] args) { String s="hello"; Syst ...

  3. 本地环境Django配置问题

    Django本地环境出现的问题 当你的前端出现这个问题的时候 你只需要吧setting.py 中的DEBUG 改为 True,即可 我原来是是DEBUG = False 本人亲测有用!!!

  4. gin框架使用orm操作数据库(转)

      简介:orm俗称关系对象模型,用来映射数据库SQL和对象的工具 ,相当于mongodb里面的mongoose库,Java里面的mybatis ibatis Golang GORM使用 https: ...

  5. request-html 使用

    from requests_html import HTMLSessionsession = HTMLSession()resp = session.get('http://www.spbeen.co ...

  6. oracle统计同一字段0和1

    SELECT 班级表.班级编号,班级表.班级名称,SUM(DECODE(性别, '1', 1)) 女生人数,SUM(DECODE(性别, '0', 1)) 男生人数FROM 学生表, 班级表WHERE ...

  7. sql 删除所有存储过程

    1.执行以下sql语句即可删除所有存储过程 --/**********删除所有存储过程*************************/-- use 数据库名 go declare @tname v ...

  8. C# Timer用法及实例讲解

    摘自:http://www.cnblogs.com/xcsn/archive/2013/05/10/3070485.html 1.C# Timer用法及实例详解 http://developer.51 ...

  9. 主流开源分布式图数据库 Benchmark

    本文由美团 NLP 团队高辰.赵登昌撰写 首发于 Nebula Graph 官方论坛:https://discuss.nebula-graph.com.cn/t/topic/1377 1. 前言 近年 ...

  10. python3配置socks5代理进行爬取

    一.代码 #!/usr/bin/python # -*- coding: UTF-8 -*- import requests import socket import socks SOCKS5_PRO ...