我应该什么时候使用 Vuex？

Question

我应该什么时候使用 Vuex？

And*_*kov 4 javascript vue.js vue-component vuex vuejs2

现在我开始学习vue，我正在创建用于编辑数据库的SPA。现在我不明白我应该在哪里使用 Vuex。我可以$emit在任何地方使用道具，它可以帮助我找到所需的参数。那么在什么情况下我应该使用 Vuex？

Answer 1

Bou*_*him 9

根据this awesome tip来自Vuedose 的博客

Vue.js 2.6 引入了一些新功能，我非常喜欢的是新的全局可观察 API。

现在您可以在 Vue.js 组件范围之外创建反应式对象。而且，当您在组件中使用它们时，它会适当地触发渲染更新。

通过这种方式，您可以创建非常简单的存储，而无需 Vuex，非常适合简单的场景，例如需要跨组件共享某些外部状态的情况。

对于这个技巧示例，您将构建一个简单的计数功能，将状态外部化到我们自己的商店。

首先创建 store.js：

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

Run Code Online (Sandbox Code Playgroud)

如果您对突变和操作的想法感到满意，您可以通过创建普通函数来更新数据来使用该模式：

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

Run Code Online (Sandbox Code Playgroud)

现在你只需要在一个组件中使用它。要访问状态，就像在 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>

Run Code Online (Sandbox Code Playgroud)

虽然这解释了如何避免使用 Vuex，但它并没有回答所提出的问题：*“在什么情况下我应该使用 Vuex？”*。或者，换句话说，*“Vuex 的目的是什么以及它解决什么问题？”* (3认同)
我同意，当你不需要 Vuex 的所有优点（主要是 SSR）时，“Vue.observable”是 Vuex 的一个很好的替代品（我发现自己经常使用它，尤其是分离关注点）。在 2.6 之前，人们可以使用普通的 [Vue 实例](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) 来创建一个简单的商店。但我认为这里提出的问题是相当好的和合理的（很多新人都在问同样的问题）：*“为什么我应该为 Vuex 烦恼？它看起来很复杂，好处也不清楚。”*。我很惊讶它被否决了。 (2认同)

Answer 2

小智 5

是的，你可以在不使用 Vuex 的情况下做任何事情，但是随着时间的推移，如果你的应用程序变得越来越大，那么它将很难维护，

根据 vuex 文档，

问题一，传递 props 对于深度嵌套的组件来说可能很乏味，并且对于同级组件根本不起作用。问题二，我们经常发现自己求助于解决方案，例如直接获取父/子实例引用或尝试通过事件改变和同步状态的多个副本。这两种模式都很脆弱，很快就会导致代码难以维护。

希望它能回答您的问题。

Answer 3

And*_*hiu 5

使用 Vuex（这是 Vue 的Redux版本）的主要目的是状态（或数据）管理。用外行的话来说，它有一个单一的事实来源（对于你的数据）。

它反对在数据更改时发出事件的常见模式，以便应用程序的其他部分可以保持其数据与当前组件的数据同步。

不是允许一个特定的组件直接更改数据，而是将更改委托给一个单独的模块：存储。任何使用该数据的组件都会收到有关更改的通知。这在复杂的应用程序中变得非常有用，其中常见的发射模式冒着创建循环更新循环的风险。

使用 Redux 模式的应用程序受益于：

结果的可预测性，
易于测试
代码可维护性和可扩展性
关注点分离
易于调试（时间旅行：为了调试目的而撤销或重放特定更改的能力）。

简而言之，它为开发人员提供了控制权和信心，因为它使理解和修改复杂的代码、数据或应用程序行为变得更加容易。

与任何其他模式（或系统或工具）一样，Redux 模式可能会被过度使用。很明显，您不必保留仅由存储中的一个组件使用的数据。由于没有其他组件需要知道对该数据的任何更改，因此应该在使用它的组件中管理它。

Vuex 允许将数据组织成模块，因此您可以保持一切整洁和可维护。

最后但并非最不重要的一点是，使用 Redux 模式的最有用的好处之一是使 SSR（服务器端渲染）实现变得轻而易举。SSR 极大地提高了优化和用户体验，并提高了应用程序的感知性能。

归档时间：	6 年，1 月前
查看次数：	2841 次
最近记录：	5 年，2 月前