Vue2.x学习笔记。原视频教程：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

Vuex

认识Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。
其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。
不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

但是，有什么状态时需要我们在多个组件间共享的呢？

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

单界面的状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情

什么意思呢？我们来看下面的图片。

这图片中的三种东西，怎么理解呢？

State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

写点代码，加深理解：

在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。
counter需要某种方式被记录下来，也就是我们的State。
counter目前的值需要被显示在界面中，也就是我们的View部分。
界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

多界面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的

状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。
但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！
没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式（大管家）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。
这就是Vuex背后的基本思想。

Vuex基本使用

0. 安装：

npm install vuex --save

1. 提取公共store对象，保存共享状态

首先，我们需要在某个地方存放我们的Vuex代码：

这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件

在index.js文件中写入如下代码：

import Vuex from 'vuex'
import Vue from 'vue'Vue.use(Vuex)const store = new Vuex.store({state: {},mutations: {} //需要共享的状态
})export default store

2. 挂载到Vue实例中

其次，我们让所有的Vue组件都可以使用这个store对象

来到main.js文件，导入store对象，并且放在new Vue中
这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

import Vue from 'vue'
import App from './App'
import store from './store'//Vue.config.productionTip = falsenew Vue({el: '#app',store,render: h => h(App)
})

3. 使用store对象

在其他组件中使用store对象中保存的状态即可

通过this.$store.state.属性的方式来访问状态
通过this.$store.commit('mutation中方法')来修改状态

Vuex核心概念

state

Vuex提出使用单一状态树, 什么是单一状态树呢？

英文名称是Single Source of Truth，也可以翻译成单一数据源。

但是，它是什么呢？我们用一个生活中的例子做一个简单的类比：

我们知道，在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）。
这些信息被分散在很多地方进行管理，有一天你需要办某个业务时(比如入户某个城市)，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误。
这种保存信息的方案，不仅仅低效，而且不方便管理，以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护，当然国家目前已经在完善我们的这个系统了)。

这个和我们在应用开发中比较类似：

如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。
所以Vuex也使用了单一状态树来管理应用层级的全部状态。
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

基本使用

有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：

获取学生年龄大于20的个数:
我们可以在Store中定义getters
- 组件中使用computed：
- store中使用getters：

作为参数和传递参数

如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么代码可以这样来写：

getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数。

比如上面的案例中,我们希望根据ID获取用户的信息

Mutations

Vuex的store状态的更新唯一方式：提交Mutation

Mutation状态更新

Mutation主要包括两部分：

字符串的事件类型（type）
一个回调函数（handler），该回调函数的第一个参数就是state。

mutation的定义方式：

//store.vueconst store = new Vuex.store({state: {count:100},//定义方法mutations: {increment(state) {state.count++}}
})

通过mutation更新：

//App.vue//<button @click="addition">+</button>methods: {addition() {//提交mutation方法this.$store.commit('increment')}
}

Mutation传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数。参数被称为是mutation的载荷(Payload)。

一个参数：

//mutation中定义
decrement(state, n) {state.count -= n
}

//methods中提交
subtraction() {this.$store.commit('decrement', 2)
}

多个参数：

这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象。这个时候可以再从对象中取出相关的信息。

changeCount(state, payload) {state.count = payload.count
}

changeCount() {this.$store.commit('changeCount', {count: 0})
}

Mutation提交风格

上面的通过commit进行提交是一种普通的方式。Vue还提供了另外一种风格, 它是一个包含type属性的对象：

this.$store.commit({type: 'changeCount',count: 100
})

Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变, 依然如下:

changeCount(state,payload) {state.count = payload.count
}

Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新。

state中的这些属性都会被加入到响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中应用到这些属性的地方，让界面发生刷新。

这就要求我们必须遵守一些Vuex对应的规则:

提前在store中初始化好所需的属性。
当给state中的对象添加新属性时, 使用下面的方式:
- 方式一: 使用Vue.set(obj, 'newProp', 123)
- 方式二: 用新对象给旧对象重新赋值

我们来看一个例子:

当我们点击更新信息时, 界面并没有发生对应改变。

如何才能让它改变呢?

查看下面代码的方式一和方式二，都可以让state中的属性是响应式的：

mutation: {updateInfo(state,payload) {//state.info['height'] = payload.height//方式一：Vue.set()Vue.set(state.info, 'height', payload.height)//方式二：给info赋值一个新对象state.info = {...state.info, 'height': payload.height}}
}

Mutation的类型常量

我们来考虑下面的问题:

在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)。
当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多。
方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况。

如何避免上述的问题呢?

在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型。
我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然。

具体怎么做呢?

我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量：
定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称：

Mutation同步函数

通常情况下, Vuex要求我们Mutation中的方法必须是同步方法。

主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照。但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成。

比如：

你会发现state中的info数据一直没有被改变, 因为他无法追踪到。

So，通常情况下不要在mutation中进行异步的操作。

Actions

基本定义

我们强调, 不要在Mutation中进行异步操作。

但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的。这个时候怎么处理呢?

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的。

Action的基本使用代码如下:

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {increment(context) {context.commit('increment')}}
})

context是什么？

context是和store对象具有相同方法和属性的对象。
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等。
但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说。

我们定义了actions,，然后又在actions中去进行commit，这样的代码是否多此一举呢？事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了。

Action的分发

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch：

methods: {increment() {this.$store.dispatch('increment')}
}

同样的, 也是支持传递payload：

methods: {increment() {this.$store.dispatch('increment', {cCount: 5})}
}

mutations: {increment(state,payload) {state.count += payload.cCount}
},
actions: {increment(context, payload) {setTimeout(() => {context.commit('increment', payload)}, 5000)}
}

Action返回的Promise

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject：

Module

Module是模块的意思, 为什么在Vuex中我们要使用模块呢？

Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理。

当应用变得非常复杂时，store对象就有可能变得相当臃肿。

为了解决这个问题，Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。

我们按照什么样的方式来组织模块呢? 我们来看下边的代码：

上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写。

我们在moduleA中添加state、mutations、getters
mutation和getters接收的第一个参数是局部状态对象

注意：

虽然，我们的doubleCount和increment都是定义在对象内部的，但是在调用的时候, 依然是通过this.$store来直接调用的。

Actions的写法

actions的写法呢？接收一个context参数对象，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

如果getters中也需要使用全局的状态, 可以接受更多的参数：

项目结构

当我们的Vuex帮助我们管理过多的内容时, 好的项目结构可以让我们的代码更加清晰。

Vue学习笔记（5）（Vuex）相关推荐

少侠请重新来过 - Vue学习笔记(八) - Vuex
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. State Vuex ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...

Vue学习笔记（5）（Vuex）