Vuex 是什么？

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

简单理解

Vuex可以帮我们管理全局的属性，并且是是响应式的，状态的变化是可以跟踪的

什么是“状态管理模式”？

​x
<template>
    <h3>Count计数器:{{ count }}</h3>
    <button @click="addHandler">增加</button>
</template>
<script setup>

import { ref } from "vue"

const count = ref(0)

function addHandler(){
    count.value ++
}

</script>

这个状态自管理应用包含以下几个部分

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作，响应在视图上的用户输入导致的状态变化

以下是一个表示“单向数据流”理念的简单示意

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

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态

问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：您自会知道什么时候需要它。