带参数的 Getters

虽然可以通过 $store.getters 属性直接访问 Getter，但您可能会遇到需要对 getter 工作方式进行更多控制的情况。参数提供了一种自定义 Getters 工作方式的方法。考虑以下 store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        books:[
            {type:'nonfiction', title:'Truth about Cats', pages: 200},
            {type:'nonfiction', title:'Truth about Dogs', pages: 100},
            {type:'fiction', title:'The Cat Said Meow', pages: 400},
            {type:'fiction', title:'The Last Dog', pages: 600},
        ]
    },
    getters: {
        fiction(state) {
            return state.books.filter(book => book.type === 'fiction');
        },
        nonfiction(state) {
            return state.books.filter(book => book.type === 'nonfiction');
        }
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

这个 store 中只有一个状态值，它是一组书籍。每本书都有类型（非小说类或小说类）、标题和页数。为了方便地比较一本书和另一本书，使用了两个 getters。他们通过小说或非小说书籍进行过滤。

以下是如何在组件中使用它。首先，我们迭代 fiction 类 getter，然后遍历 nonfiction 类 getter：

<h2>Fiction Books</h2>
<ul>
    <li v-for="book in $store.getters.fiction" :key="book.title">
    {{ book.title }}
    </li>
</ul>

<h2>Non-Fiction Books</h2>
<ul>
    <li v-for="book in $store.getters.nonfiction" :key=
    "book.title">
        {{ book.title }}
    </li>
</ul>

在前面的模板中，使用两个无序列表来迭代每种类型的书籍。结果如下所示：

Figure 1. Figure 9.3: Rendering fiction and non-fiction books via getters

好的，到目前为止一切顺利。但是，如果您想根据页数获取书籍怎么办？这不是一个简单的布尔值或字符串属性，而是一个数字。但是，因为 getter 可以接受参数，所以我们可以创建一个新的 getter，让我们请求最大页数。（我们可以支持多个参数，因此，如果您想要一个获取一系列值内的书籍的 getter，则可以支持最小和最大页数。）为了创建接受参数的 getter，您的代码本身必须返回一个函数。

下面是我们定义一个返回全名一部分的 getter 的示例：

shortName(state) {
    return function(length) {
        return ('${state.firstName} ${state.lastName}').substring(0, length);
    }
}

然后，生成的 getter 可以与长度参数一起使用： {{ $store.getters.shortName(10) }}。

在下一个练习中，您将构建一个使用具有参数功能的 Getter 的应用程序。

练习 9.03：使用带参数的 Getter

您将在以下练习中测试此功能。通过向 getter 添加参数，您将能够构建更灵活的 getter，这些 getter 在不同组件中更有用。在本练习中，您将创建一个采用一个参数的 getter。

要访问本练习的代码文件，请参阅 https://packt.live/2Ioi2vy 。

使用 Vuex 搭建另一个应用程序，一旦打开，编辑 store 以包含一组书籍以及小说、非小说和页面大小的 getter。这可以在 index.js 的 store 目录中找到：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        books:[
            {type:'nonfiction', title:'Truth about Cats', pages: 200},
            {type:'nonfiction', title:'Truth about Dogs', pages: 100},
            {type:'fiction', title:'The Cat Said Meow', pages: 400},
            {type:'fiction', title:'The Last Dog', pages: 600},
        ]
    },
    getters: {
        fiction(state) {
            return state.books.filter(book => book.type === 'fiction');
        },
        nonfiction(state) {
            return state.books.filter(book => book.type === 'nonfiction');
        },
        booksByMaxPages(state) {
            return function(pages) {
                return state.books.filter(book => book.pages <= pages);
            }
        }
    }
})

现在编辑 App.vue 以使用所有三个 getter - 首先是小说和非小说 getter，然后是页数不超过 150 的书籍：

<template>
    <div id="app">
        <h2>Fiction Books</h2>
        <ul>
            <li v-for="book in $store.getters.fiction" :key=
            "book.title">
                {{ book.title }}
            </li>
        </ul>
        <h2>Non-Fiction Books</h2>
        <ul>
            <li v-for="book in $store.getters.nonfiction" :key=
            "book.title">
                {{ book.title }}
            </li>
        </ul>
        <h2>Short Books</h2>
        <ul>
            <li v-for="book in $store.getters.booksByMaxPages(150)"
            :key="book.title">
                {{ book.title }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'app'
}
</script>

完成后，您可以通过启动 Vue 应用程序（在终端中输入 npm run serve）并在浏览器中打开 URL 来查看结果。您应该看到以下内容：

Figure 2. Figure 9.4: The parameterized getter in action

在本练习中，我们学习了如何使用更强大的使用参数的 getter。这使得它们更加灵活并且更能适应您的组件可能需要的内容。现在您已经了解了从 Vuex 存储中读取数据的多种方法，是时候看看如何修改状态了。