使用 State

在 Vuex 存储的最低级别，您将找到 Vuex 管理的实际数据(state)。所有组件都可以通过特殊的 $store 变量访问状态。虽然此变量中有更多内容，但要读取状态，您可以使用 $store.state.someStateValue。因此，例如：Hello, my name is {{ $store.state.name }} 会在组件中输出 Vuex 存储中的名称值。对于从 store 读取的简单操作，这就是您所需要的。

我们现在将在下面的练习中学习如何显示状态值。

练习 9.01：显示状态值

在本练习中，您将使用 Vuex 创建一个空的 Vue 应用程序。上一节描述了如何通过 CLI 完成此操作，如果您遵循此操作，您就可以开始使用了。如果没有，请立即创建一个，确保启用 Vuex。在本练习中，我们将简单地在状态中设置一些值并将它们显示在组件中。

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

  1. 构建应用程序后，打开 store/index.js 并修改 state 块以添加三个新值。这里的数据是任意的，可以是 JavaScript 可以处理的任何数据（字符串、数字、数组等）：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        name:"Lindy",
        favoriteColor: "blue",
        profession: "librarian"
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

  2. 现在我们需要修改组件以显示状态值。打开 App.vue 并进行如下修改：

    <template>
    <div id="app">
        <p>
            My name is {{ $store.state.name }} and
            my favorite color is {{ $store.state.favoriteColor }}.
            My job is a {{ $store.state.profession }}.
        </p>
        <HelloWorld />
    </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld';

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

  3. 接下来，编辑 HelloWorld.vue 组件以显示状态中的值：

    <template>
    <div>
        <p>
            Hi, I'm a component, and I also have access to state!
            My name is {{ $store.state.name }}.
        </p>
    </div>
</template>

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

要查看您的应用程序，请在终端中输入 npm run serve。 CLI 完成后，您可以打开浏览器中显示的 URL 来查看您的应用程序，该应用程序应如下所示：

My name is Lindy and my favorite color is blue. My job is a
librarian.

Hi, I am a component, and I also have access to state! My name is
Lindy.

正如您所看到的，主组件和子组件都可以访问状态并看到相同的值。这不应该令人惊讶，但确认事情按预期进行总是很高兴。

虽然直接访问状态值使事情变得简单，但让我们看一下更复杂的用法：使用 getter 的派生值。