Vuex-在应用程序中过度使用吸气剂。 错误解析

本文将讨论大多数初学者在Vue + Vuex上开发应用程序时犯的常见错误。 我们将讨论吸气剂以及如何正确使用它们。 我们还将看一下辅助函数mapState和mapGetters。

阅读之前：建议您具有Vue和Vuex的基本知识。

第1章。吸气剂。 不当使用示例

吸气剂是Vuex存储库的一部分，该存储库将有关存储库当前状态的计算数据返回给我们的组件。

考虑一个例子：

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

这看起来像一个包含所有书籍列表的组件：

 export default { computed: { //   books() { return this.$store.getters.books } } } 

上面的示例有效，但这是不值得的。 通过这种方法，我们使应用程序过载。

如果您需要直接将数据从存储直接输出到组件，而无需进行任何修改，则吸气剂不是最佳解决方案。 接下来，我将展示如何改进代码并摆脱不正确使用getter的问题。

第2章。使用mapState从存储中检索数据

该文档的内容如下：

当组件需要使用许多属性或仓库吸气剂时，声明所有这些计算出的属性可能很繁琐。 在这种情况下，可以使用mapState函数，该函数自动生成计算出的属性。

让我们回到我们的组件并使用mapState而不是getter：

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

可以删除存储库中的吸气剂，因为 我们不再需要他了：

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

更方便了吧？ 我们摆脱了不必要的吸气剂并减少了代码量。

第3章。为什么要使用吸气剂（如果有mapState）

仍然需要它们。 在需要显示存储库中经过修改的信息（例如，已阅读的所有书籍的列表）的情况下，会使用Getter。

让我们创建一个吸气剂，以从存储库中读取所有书籍：

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

现在，我们的组件将如下所示：

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

可以停止这一点，但是还有另外一件有用的事情值得知道。 如果需要在不同的组件中重用相同的getter，则每次在计算方法中编写getter可能都不是很方便。 MapGetters进行了营救 。

让我们看一个例子：

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

改进是显而易见的：使用mapGetters，我们减少了代码量。

您还可以根据一些数据从存储库中计算信息，例如，通过ID或名称获取一本书。 这可以通过将参数传递给我们的getter来实现。

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

材料固定

• 需要显示存储库中的修改信息（例如，已阅读的所有书籍的列表）时，请使用getter，在其他情况下，请使用mapState帮助器功能。
• 可以向Getter传递其他参数以基于它们来计算数据。
• 依赖项之一发生更改时，将更新Getter结果。

俄语的Getter文档

来自Codepen的文章中的示例应用程序