随笔录--Vuex介绍

什么是 Vuex？使用 Vuex 有哪些好处？

官方解析

Vuex是Vue.js框架中用于实现集中式状态管理的插件。它的主要作用是在多个组件之间共享状态，并且提供了一些工具来方便地管理应用程序的状态。

使用Vuex可以将应用程序的状态存储在一个集中的地方，从而使状态管理更加容易、可维护性更高。它还提供了一些工具来简化状态的更改和操作，例如：在组件中使用mutations来修改状态，或者使用actions来异步操作数据。

使用Vuex的好处包括：

1. 集中化的状态管理：将应用程序的状态集中存储在一个地方，可以方便地进行状态管理和维护。

2. 易于调试：使用Vuex可以方便地跟踪和记录状态的更改历史，有助于快速诊断和解决问题。

3. 状态共享：在多个组件之间共享状态，避免了组件之间繁琐的传值，提高了组件之间的解耦性。

4. 插件化：Vuex提供了插件机制，可以方便地扩展和自定义Vuex的功能。

Vuex的缺点包括：

1. 增加了学习成本：Vuex相对于直接在组件中管理状态来说，增加了一些学习成本，需要花费时间去学习Vuex的概念和使用方式。

2. 增加了代码复杂度：在使用Vuex的过程中，需要增加一些额外的代码来管理状态，有时可能会增加代码的复杂度。

vuex的概念

vuex是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据)

使用Vuex管理数据的好处：

1、能够在vuex中集中管理共享的数据，易于开发和后期维护；

2、能够高效地实现组件之间的数据共享，提高开发效率；

3、存储在vuex的数据都是响应式的，能够实时保持数据与页面的同步；

简单的介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单理解，Vuex 维护了一个对象，该对象存储了 Vue 应用中多个组件所需要共同使用的变量，使得组件可以共享它们，当对象中的变量发生变化时，不同组件中使用变量的地方（视图）也会相应地更新。其中，状态自管理应用包含以下几个部分：

state，驱动应用的数据源；

view，以声明方式将 state 映射到视图；

actions，响应在 view 上的用户输入导致的状态变化。下图为单向数据流示意图：

当应用中遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。

• 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

优势

响应式：相比于一个简单的全局对象，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会进行高效的更新，从而确保了单向数据流的简洁性不被破坏。

集中化管理：Vuex 通过把组件的共享状态抽取出来，以全局单例模式管理，这样任何组件都能用一致的方式获取和修改状态，使代码变得更具结构化且易于维护。

插件式扩展：Vuex 允许开发者编写插件来扩展其功能，比如实现日志记录、持久化存储和调试等。也就是说，开发者可以根据应用程序的需求来选择性地扩展其功能。

高度集成：由于 Vuex 是专门为 Vue.js 设计的，因此可以与 Vue.js 高度集成。在使用 Vuex 的同时，还可以利用 Vue.js 的许多特性，如指令、组件、计算属性等来构建更强大的应用程序。

应用场景

如果需要开发大型单页应用或应用里需要维护大量全局的状态，就可以使用 Vuex，否则，一个简单的 store 模式就够了。

用法

Vuex 将全局状态放入 state 对象中，它本身是一颗状态树，组件中使用 store 实例的 state 访问这些状态。

然后用配套的 mutation 方法修改这些状态，并且只能用 mutation 修改状态，在组件中调用 commit 方法提交 mutation。

如果应用中有异步操作或复杂逻辑组合，需要编写 action，执行结束如果有状态修改仍需提交 mutation，组件中通过 dispatch 派发 action。

最后是模块化，通过 modules 选项组织拆分出去的各个子模块，在访问状态（state）时需注意添加子模块的名称，如果子模块有设置 namespace，那么提交 mutation 和派发 action 时还需要额外的命名空间前缀。