大纲

这一讲我们最主要的就是学习vue中的数据管理VueX,这个是一个大杀器

一、回顾一些Promise相关的东西

Promise 有几个比较重要的方法,最重要的还是有一个叫做all的方法,这个也是非常的强大的

假设我们目前要求,希望能按顺序的拿到先后的两个ajax那么我应该怎么处理呢

Promse.all( [
new Promose( ( resolve,rejcet ) => {
$.ajax({
url:'xxxx',
data:'xxxx',
sucess:(res) => {
resolve(res)
}
})
$.ajax({
url:'xxxx',
data:'xxxx',
sucess:(res) => {
resolve(res)
}
})
}) ]).then( results => {
consel.log(results)
// 这样拿到的就是一个数组了, 先后的顺序就是里面的值
} )

注意啊这里对promise的深入的解释说明

  1. 首先我们的两个回调resolve 还有reject注意啊,
这两个回调回调函数是 在传入的时候定义的,但是调用是在promse里调的!这两个参数是函数!!函数!!回调函数!

一、概念

Vue官方介绍

绝大多数的管方都非常喜欢用概念来解释概念,这就有点难搞了,我这个概念的都不懂,你又给我搞另一个概念

实际上那个Vuex就是一个大管家,统一进行管理,全局的单例模式

1.最通俗的解释

Vuex实际上就是一个 用来放 一些组件共享的数据的,实际上这可能是是下面这些情况

  1. 登录

    假设我们目前有50+页面。我们都每一个页面都要发送接口请求而且这些请求需要token,那么如果我是登录的,我就需要在每一个页面拿到我的登录token这样就造成了数据的传来传去非常麻烦,如果我们有一个公共的地方来放这些东西就好了

  2. 购物车。收藏

    也会有这种组件之间打出传值的情况发生,那么我如何管理这些东西呢,这个就是一个问题

综上所述,我们需要使用Vuex*

二、如何入门的使用

2.简单的使用

这里假设有这样的一个需求:我们目前有两个组件App.vue 还有BMlaoli.vue 我呢,他们之间有层级的关系,app里面有一个变量叫做contuend 我希望我在app里面对countend的操作能够动态的传递到我们的BMlaoli里,而且不使用父子组件传值,那么我们如何做呢?亲看下面讲演

  1. 首先我们需要有两个组件

    他们都是最基础的样子

App

<template>
<div id="app">
<h1> 我是vueapp </h1>
</div>
</template> <script> export default {
name: 'App',
components: {
}
}
</script> <style>
</style>

BMlaoli


<template>
<div>
<h1>我是bm界面</h1>
</div>
</template> <script>
export default { }
</script> <style lang="sass" scoped> </style>
  1. app的业务逻辑
<template>
<div id="app">
<p>{{contuned}}</p> <button @click="contuned ++" >+</button>
<button @click="contuned --" >-</button> </div>
</template> <script> import bmlao from '@/components/Bmlaoli'; export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
contuned: 100
}
},
}
</script> <style>
</style>

但是问题来了,我目前希望你们在app里面做的更改可以反映到我的Bm组件里,而且不通过父子组件的方式,那么我该怎么做呢?实际上非常的简单

这个时候我们就需要一个 ‘第三者来处理这个东西’,这个第三者就是这个Vuex。

  1. vueX的引入

实际上,如果你有手动的安装使用配VueRouter的经验的话。这Vuex也是差不多的都是一样的使用方法

第一步:npm install vuex

第二步:创建一个文件夹sote里写一个index.js

第三部:在index里面安装

第四部:在main里挂载就好了

index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 安装
Vue.use(Vuex) // 使用
const store = new Vuex.Store({
state:{},
mutations: {
},
actions:{},
getters:{},
modules:{} }) // 倒出
export default store

main.js

import Vue from 'vue'
import App from './App.vue' // 导入
import Store from './store' Vue.config.productionTip = false // 挂载
new Vue({
Store,
render: h => h(App),
}).$mount('#app')

非常的简单

  1. app里的业务逻辑
<template>
<div id="app">
<p>{{ $store.state.contuned }}</p> <button @click="$store.state.contuned ++" >+</button>
<button @click="$store.state.contuned --" >-</button> <h1>------bmlaoli的界面--------</h1> <bmlao></bmlao> </div>
</template> <script> import bmlao from '@/components/Bmlaoli'; export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
// contuned: 100
}
},
}
</script> <style>
</style>

三、正确的操作state的方式

1.需要注意的地方

$store.state.contuned

需要非常说的就是 请你不要这样去修改vuex里的值,而是通过如下的方式去修改,详细见官方api说明

  1. 概述我们的更改逻辑

    view视图提交(Dispatch) ----> actions处理异步操作(commit) -----> Muations 记录你的修改 ,方便以后追踪(Mutate) -----> state修改(render)

  2. 代码逻辑

    /state/index.js

    state:{
contuned:1000
},
mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
},
actions:{},
getters:{},
modules:{}

/app.vue

<template>
<div id="app">
<p>{{ $store.state.contuned }}</p> <button @click="additon" >+</button>
<button @click="subraction" >-</button> <h1>------bmlaoli的界面--------</h1> <bmlao></bmlao> </div>
</template> <script> import bmlao from '@/components/Bmlaoli'; export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
// contuned: 100
}
},
methods: {
additon() {
this.$store.commit('increment')
},
subraction() {
this.$store.commit('decrement') },
},
}
</script> <style>
</style>

这样我们就能开发者工具追综这些东西的变化了

四、核心概念解读

vueX中有五个核心

1.单一状态树

  1. 管理系统 现实生活中的例子

    我们先来举一个例子,在我们国家一个人有很多的信息会被记录到档案管理的各个部门,车贷房贷,身份证 ,户口 ,结婚登记,这些信息都分布式的存放在各个局,地产局,户口部门......,这样对于我们的人 来说, 我们的数据来来源就是多样的,多数据源,但是这样有问题,就是一起管理的时候是不好管理的,你可能需要去这个地方盖章,去哪个地方改造,如果不通过又要重新回来盖章,XXXX太麻烦了。
  2. vuex的管理逻辑

    在我们的vue中确确实实 ,你可以new 多个Vuex但是,我们是不推荐的,因为这样管理起来就会非常的麻烦,我们的vuex推荐是 只使用一个vuex来管理共享的数据源,这个设计理念就是;单一数据源(也叫单一状态树)

2.getter

这个东西类似于计算属性

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:

高阶函数 ,返回函数的调用

  1. 需求,还是原来的案例,我希望我获取的contuned的平方

当然了,你这样也是可以的

  <h2>{{ $store.state.contuned * $store.state.contuned }}</h2>

但是很low 是不啦,如果你要写很多很多的复杂逻辑操作,那不就凉凉了吗,所以这里引申出我们的getter,字面理解就是获取的时候,对数据做一些手脚,那么我们看看如何使用

  1. 明确一下,我们的操作基本上都是在我们的vuex文件里面进行的

在getter里面搞事情

store/index.js


import Vue from 'vue'
import Vuex from 'vuex'
// 安装
Vue.use(Vuex) // 使用
const store = new Vuex.Store({
state:{
contuned:1000
},
mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
},
actions:{},
getters:{
powerCounter(state){
return state.contuned * state.contuned
}
},
modules:{} }) // 倒出
export default store

使用的时候就非常简单了

/bmlaoli.vue

  <h2>{{ $store.getters.powerCounter }}</h2>

现在我们又有了另一个需求,如果我想传递参数,怎么办,我希望我过滤出一些数据,而且我们希望我们是指定条件的过滤

这里就涉及到我们的传递参数的问题了

store/index.js


fliter(state,getters){
console.log(getters)//这里的getters实际上就是你的整个外面的getters对象 // 如果你要传递参数,你只能返回函数的调用
return age => {
state.students.filter( s => s.age >= age )
}
}

/bmlaoli.vue

原数据
<h2>{{ $store.getters.students }}</h2>
过滤之后
<h2>{{ $store.getters.fliter(40) }}</h2>

3.mutation

vuex唯一更新状态的方式,就是在这里,如果你要更改数据,vuex唯一的更改方式就是 mutation

3.1 概念

事件类型(函数名)

回调函数(回调函数,具体的业务代码)

mutations: {
// increment 事件类型
// (state){ 回调函数
// state.contuned++
// },
increment(state){
state.contuned++
}, decrement(state){
state.contuned--
},
},

3.2 传递参数payload负载

  1. 单个参数
  2. 多参数(传递对象)

需求:我们希望点击更改状态的时候的时候可传入参数

/sotre/index.js


mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
incrementCour(state,palyload){
consle.log(palyload)//拿到了一个传递过来的对象
}
},

bmlaoliu.vue3

addcCount(parmas){
this.$sore.commit( 'incrementCour' ,palyload)
}

Vue —— VueX精讲(1)的更多相关文章

  1. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  2. vue.js精讲02

    2017-09-17 笔记及源码地址 : https://github.com/wll8/vue_note vue 中的事件深入. 事件: @click/mouseover…事件简写: @ 如 @cl ...

  3. vue.js精讲01

    笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...

  4. 第三章、vue基础精讲

    3.1VUE实例 组件:全局组件,局部组件,vue的每个组件也是一个实例,有自己的实例属性和实例方法. 在console中调试vue,vm为vue的实例,凡是以$开头的都是vue的实例属性或者vue的 ...

  5. 小书MybatisPlus第6篇-主键生成策略精讲

    本文为mybatis系列文档的第6篇,前5篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小 ...

  6. 小书MybatisPlus第7篇-代码生成器的原理精讲及使用方法

    本文是本系列文章的第七篇,前6篇访问地址如下: 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小书Mybatis ...

  7. 小书MybatisPlus第8篇-逻辑删除实现及API细节精讲

    本文为Mybatis Plus系列文章的第8篇,前7篇访问地址如下: 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总 ...

  8. 精讲RestTemplate第2篇-多种底层HTTP客户端类库的切换

    本文是精讲RestTemplate第2篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 RestTemplate只是对其他的HTTP客 ...

  9. 精讲RestTemplate第3篇-GET请求使用方法详解

    本文是精讲RestTemplate第3篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

随机推荐

  1. AJAX一

    一.http协议 1.URL http://www.baidu.com/md/index.html 结构:协议+主机名称+目录结构+文件名称 URL完整的结构 <scheme>://< ...

  2. nodejs+express搭建小程序后台服务器

    本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...

  3. PL/SQL语言语法

    一.前言 SQL全称是"结构化查询语言(Structured Query Language)",而PL/SQL是过程语言(Procedure Language),是对SQL的扩展. ...

  4. 201771010128 王玉兰《面象对象程序设计 (Java) 》第六周学习总结

    ---恢复内容开始--- 第一部分:基础知识总结: 1.继承 A:用已有类来构建新类的一种机制,当定义了一个新类继承一个类时,这个新类就继承了这个类的方法和域以适应新的情况: B:特点:具有层次结构. ...

  5. Hyperledger Fabric——balance transfer(二)注册用户

    详细分析blance transfer示例的用户注册(register)与登录(enroll)功能. 源码分析 1.首先分析项目根目录的app.js文件中关于用户注册和登录的路由函数.注意这里的tok ...

  6. python 计算异或

    '''******************************************************** Func Name: addZero Para: x : 字符串 y : 长度 ...

  7. Jmeter基础-HTTP请求

    启动Jmeter 打开jmeter/bin文件/jmeter.bat(Windows执行文件)文件,就可以启动jmeter了 1.创建测试计划 启动后默认有一个TestPlan(测试计划),可修改其名 ...

  8. oracle 11g 用户名和密码默认区分大小写

    oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_logon=false 设置改为不区分大小写.

  9. node进程间通信

    作为一名合格的程序猿/媛,对于进程.线程还是有必要了解一点的,本文将从下面几个方向进行梳理,尽量做到知其然并知其所以然: 进程和线程的概念和关系 进程演进 进程间通信 理解底层基础,助力上层应用 进程 ...

  10. AES128_CBC模式加密

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES, ...