什么是vuex? 什么场景下适用vuex？

Posted 2020-12-18 restart77

问题一：什么是vuex？

回答：Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用 集中式存储 管理应用的所有组件的状态。

　　　每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同：（重点）

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vuex的核心概念和核心概念图：

1、state - Vuex store实例的根状态对象，用于定义共享的状态变量。
2、Action -动作，向store发出调用通知，执行本地或者远端的某一个操作（可以理解为store的methods）
3、Mutations -修改器，它只用于修改state中定义的状态变量。
4、getter -读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）

详解：

---

概念：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储 管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

解决的问题：

有了vue-router，可以将一个组件视为一个页面来使用。由于组件只维护自身的状态（data），组件创建时或者说进入路由时它们被初始化，切换至其他的组件页时当前页自然要被销毁，从而导致data也随之销毁。

页面与页面之间总会产生各种需要的共享变量，如果通过$router.param或者$router.meta来传递是远远不够的，很多情况下不得不采用window来保存一些全局的共享变量。

这样出现的问题：vue是不会维护window的这些共享变量的。对于组件来讲，这些变量都存在于组件作用域以外，组件并不会自动维护，这样就违背了js编程规范或者风格规范的一条基本准则：全局变量是毒瘤，是具有极高副作用的。

当我们将window内的对象绑定到不同的自定义组件内，一旦要对window内的变量进行修改，会发现所有以对象方式绑定的自定义组件，当对象内的某个属性发生改变时将不会执行自动刷新，所有的计算属性也同时失效！更诡异的是这种情况并不是绝对出现的，当页面元素相对简单的时候一切都显得很正常，一旦页面元素增多，对应的交互操作增多时，这种奇怪的现象就会发送。

vuex就是专门解决页面与页面之间需要的共享变量的创建、维护、变更问题的。