应用 Getters

在上一个练习中，您看到了直接访问状态是多么简单，但有时您可能需要更复杂的状态视图。为了使这更容易，Vuex 支持称为 getter 的功能。

Getter 在存储中拥有自己的块，您可以根据需要定义多个块。每个 getter 都会将 state 作为参数传递，这让您可以使用您需要的任何内容来创建您的值。最后，getter 的名称决定了它的暴露方式。考虑这个简单的例子：

state: {
    name: "Raymond",
    gender: "male",
    job: "Developer Evangelist"
},
getters: {
    bio(state) {
        return `My name is ${state.name}. I'm a ${state.job}`;
    }
}

该存储定义了三个状态值（name、gender 和 job），并且还提供了一个名为 bio 的 “虚拟” 属性，该属性返回数据的描述。请注意，getter 仅使用两个状态值，这完全没问题。

要引用组件中的 getter，请使用 $store.getters.name，其中 name 是 getter 的名称。因此，要访问前面代码中定义的 Bio getter，您可以使用以下命令：

{{ $store.getters.bio }}

除了传递 state 之外，getter 还传递其它 getter 作为其第二个参数，这允许一个 getter 在必要时调用另一个 getter。

在下一个练习中，我们将看到一个使用它的示例。

练习 9.02：向 Vuex 存储添加 Getter

在本练习中，您将构建一个使用 Getters 功能的示例。您将向 Vuex 存储添加 Getters，并从主 Vue 应用程序添加对它的调用。

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

  1. 搭建一个新应用程序，记住在设置中使用 Vuex（如果忘记了，只需使用 vue add vuex）。 键入 npm run serve 启动应用程序并在浏览器中打开 URL。

  2. 打开您的 store 文件 (store/index.js)，然后修改它以定义两个状态值和一个将返回这两个值的 getter：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        firstName: "Lindy",
        lastName: "Roberthon"
    },
    getters: {
        name(state) {
            return `${state.firstName} ${state.lastName}`;
        }
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

  3. 现在打开 App.vue 并修改它，以便使用 name getter：

    <template>
    <div id="app">
        <p>
            My name is {{ $store.getters.name }}
        </p>
    </div>
</template>

    正如您在下面的屏幕截图中看到的，这将根据 getter 中使用的逻辑显示完整的名称：

    My name is Lindy Roberthon

    虽然相当简单，但希望您能在这里看到 Getters 所实现的功能。现在，我们有一个由名字和姓氏组成的名称概念。这并不是非常复杂的逻辑，但是通过将其放置在 Vuex 存储中，我们将其定义为可供应用程序中的所有组件使用的一个位置。如果此名称定义发生更改（可能是先列出姓氏，并用逗号分隔），您可以修改一次即可完成。

接下来，我们将考虑如何使用附加逻辑来增强 Getters。