现在我开始学习 vue，我正在创建用于编辑数据库的 SPA。现在我不明白应该在哪里使用 Vuex。我可以在任何地方使用道具和$emit，它可以帮助我找到需要的参数。那么在什么情况下我应该使用 Vuex？
【问题讨论】：
标签： javascript vue.js vuejs2 vue-component vuex
使用 Vuex（这是 Vue 的 Redux 版本）的主要目的是状态（或数据）管理。用外行的话来说，它具有单一的事实来源（用于您的数据）。
它反对在数据更改时发出事件的常见模式，以便应用程序的其他部分可以保持其数据与当前组件的数据同步。
您将更改委托给一个单独的模块：商店，而不是允许一个特定组件直接更改数据。任何使用该数据的组件都会收到有关更改的通知。这在复杂的应用程序中变得非常有用，其中常见的发射模式存在创建循环更新循环的风险。
使用 Redux 模式的应用受益于：
简而言之，它为开发人员提供了控制和信心，因为它使理解和修改复杂的代码、数据或应用行为变得更加容易。
与任何其他模式（或系统或工具）一样，Redux 模式可能会被过度使用。很明显，您不必保留仅由商店中的一个组件使用的数据。由于没有其他组件需要知道对该数据的任何更改，因此应该在使用它的组件中对其进行管理。
Vuex 允许将数据组织到模块中，这样您就可以保持一切整洁和可维护。
最后但同样重要的是，使用 Redux 模式最有用的好处之一是让 SSR（服务器端渲染）实现变得轻而易举。 SSR 极大地改善了优化和用户体验，并提高了应用程序的感知性能。
【讨论】：
根据来自 Vuedose 博客的this awesome tip
Vue.js 2.6 引入了一些新特性，其中一个我非常喜欢的是新的全局可观察 API。
现在您可以在 Vue.js 组件范围之外创建响应式对象。而且，当你在组件中使用它们时，它会适当地触发渲染更新。
通过这种方式，您可以在不需要 Vuex 的情况下创建非常简单的商店，非常适合需要跨组件共享一些外部状态的简单场景。
对于这个技巧示例，您将构建一个简单的计数功能，将状态外部化到我们自己的商店。
首先创建store.js：
import Vue from "vue";
export const store = Vue.observable({
count: 0
});
如果您对突变和操作的想法感到满意，您可以通过创建简单的函数来更新数据来使用该模式：
import Vue from "vue";
export const store = Vue.observable({
count: 0
});
export const mutations = {
setCount(count) {
store.count = count;
}
};
现在您只需要在组件中使用它。要访问状态，就像在 Vuex 中一样，我们将使用计算属性和突变方法：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="setCount(count + 1);">+ 1</button>
<button @click="setCount(count - 1);">- 1</button>
</div>
</template>
<script>
import { store, mutations } from "./store";
export default {
computed: {
count() {
return store.count;
}
},
methods: {
setCount: mutations.setCount
}
};
</script>
【讨论】：
是的，你可以在不使用 Vuex 的情况下做任何事情，但是随着时间的推移，如果你的应用程序变得越来越大，那么维护起来会很困难，
根据 vuex 文档，
问题一，深度嵌套传递 props 可能很乏味 组件，并且根本不适用于兄弟组件。问题 二，我们经常发现自己求助于解决方案，例如达到 用于直接父/子实例引用或尝试变异和 通过事件同步状态的多个副本。这两个 模式很脆弱，很快就会导致代码无法维护。
希望它能回答你的问题。
【讨论】：
查看vuex文档；它描述了为什么/何时要使用 vuex https://vuex.vuejs.org 的所有原因。
例如，多个组件需要相同的信息、控制突变、验证等。
【讨论】：