p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545; min-height: 17.0px }
p.p4 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }
span.s3 { font: 14.0px "Helvetica Neue" }
span.s4 { font: 17.0px ".Apple Color Emoji UI" }

vuex学习

Vuex入门其实很简单 当我们项目数据量很庞大的时候

比如一个接口数据在多个组件之间重复使用多次

我们这里采用的是vue-cli构建的项目目录

当然前面的npm install vux什么的就不说了

我们创建好store模块之后 首先你要确保你的实例上面有store

 

1.引入store 并且挂载在实例上

好,然后,创建目录我们的store的目录大概就是下面这样子

你可以使用单独的actions getters mutations 也可以使用模块化【modules】

我们这里采用的是模块化 modules 比如我们有一个狗【dog】的模块

【modules】 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。随着应用复杂度的增加,这种拆分能够更好地组织代码

先来看我们的【store/index.js】

这里我们就export一下store store里面是按照模块来的

继续 我们开始进入模块【dog.js】

首先你得有一个types吧 对不对 放在外面统一管理就好 后面引入即可

然后先看一下整体的代码结构

【别着急】我们依次展开了哈

【state】

state 定义了应用状态的数据结构,同样可以在这里设置默认的初始状态

【mutations】

调用 mutations 是唯一允许更新应用状态的地方。

【actions】

Actions 即是定义提交触发更改信息的描述,常见的例子有从服务端获取数据,在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。

【getters】

Getters 允许组件从 Store 中获取数据,可以进行筛选等等 这里是可以进行数据操作的

最后 【输出一下】

OK了 一个简单的额vuex我们搭建完毕 我们回到我们的组件开始调用 怎么用呢

首先我们需要引入vuex的辅助函数 这里的话我引入三个 方便都看一下效果

辅助函数【mapState】【mapActions】【mapgetters】

我们在时间周期 computed的时候引入mapState mapGetters

【注意⚠️】

为什么要把mapState放在这里讲 是因为又个坑

一般而言 我们是直接 是不是很多人都这么做啊 嘻嘻嘻 也没错 前提是你不使用modules

我们发现 我们的dogUrl是undefined为什么呢 页面不渲染 打印的时候undefined

但是store里面确实有一个dog下面的dogUrl啊 不对 位置变了!!!!

我们打印一下store 发现了问题 因为我们使用了modules 所以 dogUrl 的位置发生了变化

应该是这样 this.$store.state.dog.dogUrl

而不是这样this.$store.state.dogUrl

所以我们采用第二种写法

好了 现在state也是可以直接使用的了

那么 你入门了吗?

vuex的简易入门的更多相关文章

  1. 机器学习简易入门(四)- logistic回归

    摘要:使用logistic回归来预测某个人的入学申请是否会被接受 声明:(本文的内容非原创,但经过本人翻译和总结而来,转载请注明出处) 本文内容来源:https://www.dataquest.io/ ...

  2. Pandas简易入门(二)

    目录:     处理缺失数据     制作透视图     删除含空数据的行和列     多行索引     使用apply函数   本节主要介绍如何处理缺失的数据,可以参考原文:https://www. ...

  3. 不用搭环境的10分钟AngularJS指令简易入门01(含例子)

    不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...

  4. Web压力测试工具 LoadRunner12.x简易入门教程--(一)回放与录制

        LoadRunner12.x简易入门教程--(一)回放与录制 今天在这里分享一下LoadRunner12.x版本的入门使用方法,希望对刚接触LoadRunner的童鞋有所帮助. LoadRun ...

  5. JNI简易入门

    JNI简介 JNI(Java Native Interface)是JDK的一部分,提供了若干API实现了Java和其他语言的通信(主要是C/C++).JNI主要用于以下场景: 贴近硬件底层的功能,Ja ...

  6. crontab简易入门

    前言 crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行,如果不使用crontab,那么任务就是常驻程序,这对你的程序要求比 ...

  7. Golang项目的配置管理——Viper简易入门配置

    Golang项目的配置管理--Viper简易入门配置 What is Viper? From:https://github.com/spf13/viper Viper is a complete co ...

  8. Vuex,从入门到...

    Vuex 是什么? 官方是这么说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 不懂? ...

  9. MyCAT简易入门

    MyCAT是mysql中间件,前身是阿里大名鼎鼎的Cobar,Cobar在开源了一段时间后,不了了之.于是MyCAT扛起了这面大旗,在大数据时代,其重要性愈发彰显.这篇文章主要是MyCAT的入门部署. ...

随机推荐

  1. POJ-3045 Cow Acrobats (C++ 贪心)

    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...

  2. JDBC第一篇--【介绍JDBC、使用JDBC连接数据库、简单的工具类】

    1.什么是JDBC JDBC全称为:Java Data Base Connectivity,它是可以执行SQL语句的Java API 2.为什么我们要用JDBC 市面上有非常多的数据库,本来我们是需要 ...

  3. 时间效率:整数中1出现的次数(从1到n整数中1出现的次数)

    求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了.ACMer ...

  4. 实验:体会Oracle权限/角色赋予的差异

    环境:Oracle 11.2.0.4 目的:验证业务用户的权限/角色赋予的差异 现在创建两个用户jingyu2和jingyu3: SYS@jyzhao1> create user jingyu2 ...

  5. [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战

    我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...

  6. [js高手之路] 设计模式系列课程 - DOM迭代器(2)

    如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 < ...

  7. angular $compiler

    directive是如何被compiled HTML编译发生在三个阶段: 1.$compile遍历DOM节点匹配directives 如果compiler找到元素上的directive,directi ...

  8. canvas浅谈 实现简单的自旋转下落

    旋转和平移是2个基础的动画效果,也是复杂动画的基础. 如果是普通的页面只要设置transform属性很容易实现平移+旋转的组合效果,达到自旋转下落的效果.因为操作的直接是动作元素本身很容易理解. 但是 ...

  9. PYTHON 函数局部变量和全局变量

    有这样一段PYTHON代码,从事C语言开发的人都知道,如果定义了全局变量,而函数内没有定义同名的函数变量的话,那么在函数内对该变量的赋值就是对全局变量空间数值的修改, 然后在PYTHON中却不尽相同, ...

  10. express 安装和运行

    1.npm install -g express-generator 2.进入服务目录(自己定义的文件夹,或者express Myapp && cd Myapp 新建Myapp文件夹并 ...