文章目录

一、Vuex概述

    1.1 官方解释

    1.2 大白话

    1.3 组件间共享数据的方式

    1.4 再看Vuex是什么

    1.5 使用Vuex统一管理好处

二、状态管理

    2.1 单页面状态管理

    2.2 多页面状态管理

    2.3 全局单例模式

    2.4 管理哪些状态

三、Vuex的基本使用

    3.1 安装

    3.2 导入

    3.3 创建store对象

    3.4 挂载store对象

四、Vuex的核心概念

    4.1 State

    4.2 Mutation

    4.3 Action

    4.4 Getter

    4.5 Modules

    4.6 优化

---

一、Vuex概述
1.1 官方解释

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

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

在这里插入图片描述
1.2 大白话

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。

其实，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。

然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

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

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。

如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。

不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。
1.3 组件间共享数据的方式

    父向子传值：v-bind属性绑定
    子向父传值：v-on事件绑定
    兄弟组件之间共享数据：EventBus
        $on 接收数据的组件
        $emit 发送数据的组件

上述只适合小范围内数据共享，如果是复杂应用的话，就不再合适了。
1.4 再看Vuex是什么

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享

如图：

在不使用Vuex进行状态管理时，如果要从最下面的紫色组件传递数据的话，还是比较繁琐，也不便于维护。

在使用Vuex进行状态管理时，只需要一个共享Store组件，紫色组件将数据写入Store中，其他使用的组件直接从Store中读取即可。

在这里插入图片描述
1.5 使用Vuex统一管理好处

    能够在Vuex中集中管理共享的数据，易于开发和后期维护
    能够高效地实现组件之间的数据共享，提高开发效率
    存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步