Vue3-秘籍-四-

布客飞龙
54 阅读19分钟

Vue3 秘籍（四）

原文：zh.annas-archive.org/md5/915E62C558C25E5846A894A1C2157B6C

译者：飞龙

协议：CC BY-NC-SA 4.0

第七章：使用 Vuex 管理应用程序状态

在兄弟组件之间传输数据可能非常容易，但想象一下让一系列组件对任何数据变化做出反应。你需要在事件总线中触发一个事件，或者通过所有父组件发送事件，直到它到达事件链的顶部，然后再一路发送到所需的组件；这个过程可能非常繁琐和痛苦。如果你正在开发一个大型应用程序，这个过程是不可持续的。

Flux 库是为了帮助这个过程而开发的，其想法是将反应性带出组件边界，因为 Vuex 能够维护数据的唯一真相来源，并且同时也是你制定业务规则的地方。

在这一章中，我们将学习如何使用 Vuex，开发我们的存储，将其应用到我们的组件，并对其进行命名空间，以便我们可以在同一个存储中拥有不同的 Vuex 模块。

在这一章中，我们将涵盖以下的配方：

  • 创建一个简单的 Vuex 存储

  • 创建和理解 Vuex 状态

  • 创建和理解 Vuex 变化

  • 创建和理解 Vuex 操作

  • 创建和理解 Vuex 获取器

  • 使用 Vuex 创建一个动态组件

  • 为开发添加热模块重新加载

  • 创建一个 Vuex 模块

技术要求

在这一章中，我们将使用Node.js和Vue-CLI。

注意，Windows 用户，你需要安装一个名为windows-build-tools的 NPM 包，以便安装以下所需的包。要做到这一点，以管理员身份打开 PowerShell 并执行以下命令：

> npm install -g windows-build-tools

要安装 Vue-CLI，你需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

创建一个简单的 Vuex 存储

在应用程序中创建一个唯一的真相来源可以让你简化数据流，使数据的反应性流向另一个视角，你不再受限于父子关系。数据现在可以存储在一个地方，每个人都可以获取或请求数据。

在这个配方中，我们将学习如何安装 Vuex 库并创建我们的第一个单一存储，以及如何使用反应式操作和数据获取器来操作它。

准备工作

这个配方的先决条件如下：

  • Node.js 12+

所需的 Node.js 全局对象如下：

  • @vue/cli

  • @vue/cli-service-global

如何做...

要创建一个 Vue-CLI 项目，请按照以下步骤进行：

  1. 我们需要在终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）中执行以下命令：
> vue create initial-vuex

  1. CLI 会询问一些问题，这些问题将有助于创建项目。您可以使用箭头键进行导航，使用Enter键继续，使用Spacebar选择选项。

  2. 有两种方法可以启动新项目。默认方法是基本的babel和eslint项目，没有任何插件或配置，还有手动模式，您可以选择更多模式、插件、代码检查工具和选项。我们将选择手动：

? Please pick a preset: (Use arrow keys)
 default (babel, eslint)
❯ Manually select features
  1. 现在我们被问及项目中需要的功能。这些功能包括一些 Vue 插件，如 Vuex 或 Router（Vue-Router），测试工具，代码检查工具等。选择Babel，Router，Vuex和Linter / Formatter：
?  Check the features needed for your project: (Use arrow keys) ❯ Babel
 TypeScript Progressive Web App (PWA) Support ❯ Router ❯ Vuex
  CSS Pre-processors ❯ Linter / Formatter
 Unit Testing E2E Testing
  1. 继续此过程，选择一个代码检查工具和格式化工具。在我们的情况下，我们将选择ESLint + Airbnb配置：
?  Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ❯ **ESLint + Airbnb config** ESLint + Standard config 
  ESLint + Prettier
  1. 设置了代码检查规则后，我们需要定义它们何时应用于您的代码。它们可以在“保存时”应用，也可以在“提交时”修复：
?  Pick additional lint features: (Use arrow keys)  Lint on save ❯ Lint and fix on commit
  1. 在定义了所有这些插件、代码检查工具和处理器之后，我们需要选择设置和配置的存储位置。最好的存储位置是专用文件，但也可以将它们存储在package.json文件中：
?  Where do you prefer placing config for Babel, ESLint, etc.?  (Use 
  arrow keys) ❯ **In dedicated config files****In package.json**
  1. 现在您可以选择是否将此选择作为将来项目的预设，这样您就不需要再次重新选择所有内容：
?  Save this as a preset for future projects?  (y/N) n

我们的步骤将分为两部分：

  • 创建 store

  • 使用 Vuex 创建响应式组件

让我们开始吧。

创建 store

现在您已经有了包含 Vuex 库的项目，我们需要创建我们的第一个 store。在接下来的步骤中，我们将创建 Vuex store：

  1. 打开src/store文件夹中的index.js。

  2. 在state属性中，添加一个名为counter的新键，并将值设置为0：

state: {
  counter: 0,
},
  1. 在mutations属性中，添加两个新函数，increment和decrement。这两个函数都将有一个state参数，这是当前的 Vuexstate对象。increment函数将counter增加1，而decrement函数将counter减少1：
mutations: {
  increment: (state) => {
    state.counter += 1;
  },
  decrement: (state) => {
    state.counter -= 1;
  },
},
  1. 最后，在actions属性中，添加两个新函数，increment和decrement。这两个函数都将有一个解构参数commit，它是调用 Vuex mutation 的函数。在每个函数中，我们将执行commit函数，将当前函数的名称作为字符串参数传递：
actions: {
 increment({ commit }) {
 commit('increment');
 },
 decrement({ commit }) {
 commit('decrement');
 },
},

使用 Vuex 创建响应式组件

现在您已经定义了您的 Vuex 存储，您需要与之交互。我们将创建一个响应式组件，它将在屏幕上显示当前状态的counter，并显示两个按钮，一个用于增加counter，另一个用于减少counter。

单文件组件

在这里，我们将编写单文件组件的<script>部分：

  1. 从src文件夹中打开App.vue文件。

  2. 在文件中创建<script>部分，使用export default对象：

<script>
  export default {}; </script>
  1. 在新创建的对象中，添加 Vue computed属性，属性名为counter。在这个属性中，我们需要返回当前的$store.state.counter：
computed: {
  counter() {
  return this.$store.state.counter;
  }, },
  1. 最后，在 Vue methods属性中创建两个函数，increment和decrement。这两个函数都将执行一个带有函数名称作为字符串参数的$store.dispatch：
methods: {
  increment() {
  this.$store.dispatch('increment');
  },
  decrement() {
  this.$store.dispatch('decrement');
  }, },
单文件组件
avatar
文章
阅读
粉丝