我现在开始学习Vue,正在创建用于编辑数据库的SPA。我不理解在哪里应该使用Vuex。我可以在任何地方使用props和$emit
,并且它们可以帮助我找到所需的参数。那么我应该在什么情况下使用Vuex呢?
我现在开始学习Vue,正在创建用于编辑数据库的SPA。我不理解在哪里应该使用Vuex。我可以在任何地方使用props和$emit
,并且它们可以帮助我找到所需的参数。那么我应该在什么情况下使用Vuex呢?
根据来自Vuedose博客的this awesome tip
,Vue.js 2.6引入了一些新功能,其中我特别喜欢的是新的全局observable API。
现在你可以在Vue.js组件范围之外创建具有响应性的对象。当你在组件中使用它们时,它会适当地触发渲染更新。
这样,你就能够创建非常简单的存储空间,而不需要使用Vuex,非常适合像那些需要在组件之间共享某些外部状态的简单情况。
对于这个提示示例,您将构建一个简单的计数功能,其中将状态外部化到我们自己的store中。
首先创建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,请不要这样做。改用Pinia。这里有一个很好的答案,概述了为什么你应该选择Pinia而不是Vuex。但是,我下面所说的Redux模式仍然适用。
使用Vuex(即Vue版本的Redux)的主要目的是状态(或数据)管理。通俗地说,它是拥有单一数据源(用于您的数据)。
它反对常见的模式:当数据发生更改时,触发事件,以便应用程序的其他部分可以将其数据与当前组件的数据保持同步。
与其允许某个特定组件直接更改数据,不如将更改委托给一个单独的模块:存储库。使用该数据的任何组件都将收到关于更改的通知。在复杂应用程序中,这非常有用,因为常见的发出模式会导致创建循环更新循环的风险。
使用Redux模式的应用程序受益于:
简而言之,它使开发人员掌控和信心,并使理解和修改复杂代码、数据或应用程序行为变得更加容易。
与任何其他模式(或系统、工具)一样,Redux模式可能会被过度使用。显然,您不必将仅由一个组件使用的数据保留在存储库中。由于没有其他组件需要知道该数据的任何更改,因此应该在使用该数据的组件中管理它。
Vuex允许将数据组织成模块,以便您可以保持所有内容整洁和可维护。
最后,使用Redux模式最有用的好处之一是使服务器端渲染(SSR)实现变得轻而易举。 SSR极大地提高了优化和用户体验,并增加了应用程序的感知性能。
是的,你可以不使用Vuex来完成任何事情,但是随着时间的推移,如果你的应用程序变得更加复杂,那么它将很难维护。
根据Vuex文档,
问题一,对于深度嵌套的组件传递props会很麻烦,而且对于同级组件根本行不通。问题二,我们经常不得不采用解决方案,例如访问直接父/子实例引用或尝试通过事件改变和同步多个状态的多个副本。这两种模式都很脆弱,并很快导致代码难以维护。
希望这回答了您的问题。