总结

我们已经走了很长一段路。在本章中,你学习了 Vuex store 的架构、核心概念、模块结构和表单处理。至此,你应该知道 Vuex store 只是与状态(或数据)集中化和管理相关,并遵循一些你必须遵守的强制规则。因此,对于你的 store 中可能存在的任何状态属性,访问它的正确方式是在组件的计算属性中对其进行计算。如果你想更改状态属性的值,你必须通过 mutation 来修改它,mutation 必须是同步的。如果你想进行异步调用来修改状态,那么你必须使用 action 来提交 mutation,方法是在你的组件中 dispatch 这些 action

你还了解到,在 Nuxt 应用中创建 store 比在 Vue 应用中更容易和更简单,因为 Vuex 默认预装在 Nuxt 中。此外,在 Nuxt 中,你不需要手动组装模块及其所有方法,因为默认情况下这些都为你完成了。此外,在 Nuxt 中,你可以使用 fetchnuxtServerInit 方法在渲染页面组件和启动你的 Nuxt 应用之前,使用服务器端 API 填充 storestate。最后,你已经成功地使用带有 nuxtServerInit action 方法的 Vuex store 创建了一个简单的用户登录应用,这为在接下来的章节中创建用户登录和 API 身份验证铺平了道路。

在下一章中,我们将学习 Nuxt 中的中间件——特别是路由中间件和服务器中间件。你将学习区分这两种 Nuxt 中间件。在制作 Nuxt 应用中的中间件之前,你将使用 Vue 应用中的导航守卫创建一些路由中间件。然后,你将在 serverMiddleware 配置选项中编写一些 Nuxt 服务器中间件,作为你在第八章 “添加服务器端框架” 中学习创建的服务器端 API 的替代服务器 API。最后但并非最不重要的一点是,你将学习如何使用 Vue CLI 创建 Vue 应用,而不是我们一直使用自定义 webpack 配置创建的 Vue 应用。所以,让我们开始吧。