我啥时候应该使用 Vuex？

Posted 2023-02-22

技术标签:

【中文标题】我啥时候应该使用 Vuex？【英文标题】：When should I use Vuex?我什么时候应该使用 Vuex？ 【发布时间】：2020-01-02 18:24:48 【问题描述】：

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

【问题讨论】：

Vuex 的主页解释了它的用途以及您可能需要它的场景。阅读该内容，然后针对不清楚的地方提出具体问题。从文档中，如果您需要从不同页面的数量和数据库中访问相同的数据，我会想到。我可以访问数据库并获取不同页面的数据。有人可以详细说明这个问题，请举一些很好的例子。时长 【参考方案1】：

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

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

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

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

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

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

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

Vuex 允许将数据组织到模块中，这样您就可以保持一切整洁和可维护。

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

【讨论】：

【参考方案2】：

根据来自 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>

【讨论】：

【参考方案3】：

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

根据 vuex 文档，