06-快速上手Vuex
这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。
快速上手VueX
- 一、基本概念
-
- 1.1、什么是Vuex?
- 1.2、何时使用Vuex?
- 1.3、vue-Devtools插件的安装
- 二、VueX安装以及基本使用
-
- 2.1、安装
- 2.2、基本使用
- 三、VueX核心技术
-
- 3.1、State
- 3.2、Getters
-
- 3.2.1、简单的处理state数据
- 3.2.2、Getters作为参数和传递参数
- 3.3、Mutations
-
- 3.3.1、Mutations的作用
- 3.3.2、Mutations基本使用
- 3.3.3、Mutations响应规则
- 3.4、Actions
一、基本概念
1.1、什么是Vuex?
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。 其核心就是 store，采用集中式存储管理应用的所有组件的状态。store中文的意思是仓库，其可以简单的理解为一个公共仓库，所有的组件都可以直接向仓库拿取变量，这个变量是大家所共有共享的。其原理如下：
1.2、何时使用Vuex?
Vuex可以简单的认为是一个公共的仓库，存取变量非常方便，但不是什么时候都要用它去存储。
举个例子：就好比一个东西全城市的人都要用，那么我们可以把它放入公共仓库。如果我们自己家里要用的东西也放入到公共仓库，那么仓库的管理和维护将会非常复杂。
所以当父子组件之间的数据的传递，我们采用组件之间自带的方法去传递。 但是很多组件都要用或者组件之间的关系比较复杂（子组件和太太太爷爷共享数据）的时候，我们把数据放入到公共仓库中。
1.3、vue-Devtools插件的安装
vue-Devtools插件可以监听store的缓存的变化，以及相关组件
免费插件下载点击，下载了压缩包后我们需要对其进行解压缩，安装使用步骤如下
二、VueX安装以及基本使用
2.1、安装
打开项目所在终端或者cmd输入npm install vuex --save
2.2、基本使用
步骤如下：
- 导入插件并安装
- 创建对象
- 导出store独享
- 来到main.js中导入
三、VueX核心技术
3.1、State
State中文为状态的意思，也就是我们所用共享的变量的状态，即我们共享变量的仓库。
State采用单一状态树，英文名称是Single Source of Truth，也可以翻译成单一数据源。通俗的来说，就是我们一个项目有且只能有一个Vue.store对象。单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。
使用案例如下：
可以把state看成对象，我们要存储的变量就是它的属性
3.2、Getters
Getters可以简单理解为与computer一样的计算属性，他的本质也是通过get函数来调用数据的。
3.2.1、简单的处理state数据
getters中的函数有2个参数
- 第一个参数：
state就是Vuex.stroe中的state共享仓库 - 第二个参数：
getters将其自身作为参数传递
使用案例如下：
通过this.$store.getters.方法来获取
3.2.2、Getters作为参数和传递参数
getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数，并执行函数。
3.3、Mutations
3.3.1、Mutations的作用
所以我们需要Mutations来帮助我们观察数据的变化。Vuex的store状态的更新唯一方式：提交Mutation
3.3.2、Mutations基本使用
Mutation主要包括两部分：
- 字符串的事件类型（type）
- 一个回调函数（handler），回调函数包含2个参数，参数含义如下
1、第一个参数：`state``就是Vuex.stroe中的state共享仓库
2、 第二个参数：Payload是mutation的载荷，即更新数据时携带的额外参数
注意：此时我们提交数据是以 this.$store.commit("事件类型", 额外参数(可选))的形式来提交的，如下
3.3.3、Mutations响应规则
Mutations并不是对所有的操作都是响应的，必须符合以下条件，才能响应：
- 对于提前在store中初始化好state属性，我们对其值修改的时候，可以直接通过其属性值修改
- 对于未在store中初始化好state属性，即给state中的对象添加新属性时, 使用
Vue.set(obj, 'newProp', 123)或者用新对象给旧对象重新赋值
ps：如果我们添加的对象属性时数组类型时，我们还可以利用数组的一些方法进行添加修改，比如 push()、pop()、shift()、unshift()、splice()、sort()、reverse()
3.4、Actions
注意：即使是异步请求的数据，我们依然要经过Mutations，不能直接传给state
Actions主要包括两部分：
- 字符串的事件类型（type）
- 一个回调函数（handler），回调函数包含2个参数，参数含义如下
1、第一个参数：content代表上下文
2、 第二个参数：Payload是mutation的载荷，即更新数据时携带的额外参数
