06-快速上手Vuex

这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。

一、基本概念

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、基本使用

步骤如下：

1. 导入插件并安装
2. 创建对象
3. 导出store独享
4. 来到main.js中导入

三、VueX核心技术

3.1、State

3.1.1、基本使用

        State中文为状态的意思，也就是我们所用共享的变量的状态，即我们共享变量的仓库。

        State采用单一状态树，英文名称是Single Source of Truth，也可以翻译成单一数据源。通俗的来说，就是我们一个项目有且只能有一个Vue.store对象。单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

使用案例如下：
可以把state看成对象，我们要存储的变量就是它的属性

3.1.2、使用 mapState 简写

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.2.3、使用 mapGetters 简写

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并不是对所有的操作都是响应的，必须符合以下条件，才能响应：

1. 对于提前在store中初始化好state属性，我们对其值修改的时候，可以直接通过其属性值修改
2. 对于未在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的载荷，即更新数据时携带的额外参数