将您的Vue 2应用重构为Vue 3应用

Vue 3 为开发人员提供替代和更好的方法来构建VUE应用程序。 Vue 3中的组合物API 和组合功能的介绍使代码组织和可重复使用的微风。

预期

在本教程中，我们将探讨Vue 3中的新功能。我们还将重构 Brad Traversy 的开源Vue 2应用到Vue 3.在此过程中，您将学习如何使用新的Vue 3功能，包括组合API和Adition功能。最后，您还将学习如何在Vue 3应用程序中使用新的 Vuex 4 。

没有涵盖的

Styling - 我们不会详细介绍该项目中使用的CSS属性。虽然它可以在项目存储库上为您提供
Vue 3的简介 - 本教程致力于熟悉Vue 3的composition API 和响应式的基础
TypeScript - 我们不会介绍该项目范围内的Vue 3中Typescript的用法

先决条件：

假设你基本了解JavaScript和Vue.js并改善你的开发技能
请安装您选择的任何一种代码编辑器或安装 Visual Studio code
本教程假设您对Vue 2和Vue 3的基本了解
这不是Vue 3教程的介绍，你希望将vue 2项升级到vue 3

Vue 2有什么问题？ 🤔

Vue 3的灵感来自于Vue2的现有局限性。其中一些是：

组分变得不太可读，随着它们的增长，维护变得困难
Vue 2中的所有可用代码可重用性模式具有未解决的瓶颈
Vue 2具有有限的类型支持
更多原因在这里

Vue 3🖐🏽

Vue 3旨在解决Vue2的现有限制。在Vue 3中使用composition 组合API，您可以根据逻辑组织组件代码，而不是组件选项。这在Vue 2中存在问题，因为代码可以在多个组件选项中展开。这使得Vue 3特别简单易读和维护。

入门

让我们从 brad traversy创建的 Vue 2项目开始。该项目是一个TODO应用程序，您可以在其中执行以下操作：

添加todos
删除todos
标记已完成todos
筛选todos
隐藏/显示所有todos

在项目中，从API获取TODOS。对数据执行的所有操作都在后端进行。

创建VUE应用程序

首先，您需要使用以下命令安装 Vue CLI v4.5 的最新版本：

yarn global add @vue/cli
#OR
npm install -g @vue/cli

创建VUE应用程序的过程没有改变。如果您安装了 Vue CLI ，请运行以下命令以创建一个名为Vue3-todo的新VUE项目：

vue create vue3-todo

按照终端提示，然后选择Vue 3预设以完成设置过程。务必选择Vuex作为项目所需功能的一部分。

项目文件中的一些明显的更改：

Vue 2使用new Vue()方法来引导新的VUE应用程序。 Vue 3使用createApp方法。如果您想知道为什么需要这种更改，这是因为旧的语法使全局配置成为可能的永久变异的全局状态。以下是查看main.js文件：

Vuex 4现在有一个createStore()方法，符合Vue 3标准。使用Vuex 4您可以在几行代码中创建Vuex store。以下是目前的实现：

获取todos

从Vue 2的实现重构，当应用程序加载时，当App载入时调度action从中获取TODOS。让我们在Vuex中设置一个action来处理：

// @/store/index.js
import { ACTION_TYPES } from "../constants/action-types";
import Vuex from "vuex";
import Axios from "axios";
export default Vuex.createStore({
  state: {
    todos: [],
  },
  mutations: {
    [ACTION_TYPES.fetchTodos]: (state, todos) => (state.todos = todos),
  },
  actions: {
    onFetchTodos: async ({ commit }) => {
      const response = await Axios.get(
        "https://jsonplaceholder.typicode.com/todos"
      );
      commit(ACTION_TYPES.fetchTodos, response.data);
    },
  },
});

这里，onFetchTodos action获取来Typicode的TODO列表并提交fetchTodos mutation。然后，mutation更新状态对象中的todos。我们将在Todo.vue组件中调度此action。

您可能已经注意到我们从不存在的文件导入ACTION_TYPES。让我们创建它。在根文件夹中，创建一个src/constants/action-types.js文件：

// @/constants/action-types.js
export const ACTION_TYPES = {
  fetchTodos: "fetchTodos",
  addTodo: "addTodo",
  deleteTodo: "deleteTodo",
  updateTodo: "updateTodo",
};

上面文件中指定的action类型将在整个项目中保持不变，并帮助我们在应用程序中维护命名一致性。接下来，让我们创建一个src/components/Todos.vue文件，该文件将调度onFetchTodos action并返回Todos。

我建议在继续本教程之前阅读composition API文档。让我们快速浏览这个组件中的一些新的Vue 3 Api：

`setup()` function

Vue 3使用组合composition API，可以在setup()函数内的组织组件的所有逻辑，该函数返回模板中所需的数据。此功能使通过逻辑关注来组织组件成为可能。这是因为我们可以在setup()函数中具有生命周期方法，计算属性，状态数据等。

`onMounted()`钩

Vue 3中的onMounted()钩子是Vue 2中mounted()。当组件调用钩子时执行的回调函数：

onMounted(() => {
  store.dispatch("onFetchTodos");
});

`computed()`方法

Vue 3中的computed方法是Vue2中的computed组件属性。它需要执行特定任务并返回响应引用。引用是不变对象，它从getter中返回值：

const todos = computed(() => store.state.todos);

最后，请注意我们在setup() function中返回todos。这就是我们如何在我们想要在模板中使用的函数中的数据。目前，该应用程序在浏览器上看起来像这样：

添加todos

自从我们使用Vuex以来，我们需要一个action动作和一个要更新Todos状态的mutation。要实现该方法，请使用下面的代码更新store：

// @/store/index.js

import { ACTION_TYPES } from "../constants/action-types";
import Vuex from "vuex";
export default Vuex.createStore({
  state: {
    todos: [],
  },
  mutations: {
    // ...
    [ACTION_TYPES.addTodo]: (state, todo) => state.todos.unshift(todo),
  },
  actions: {
    // ...
    onAddTodo: async ({ commit }, title) => {
      const response = await Axios.post(
        "https://jsonplaceholder.typicode.com/todos",
        { title, completed: false }
      );
      commit(ACTION_TYPES.addTodo, response.data);
    }
  },
});

onAddTodo action需要在状态和新的TODO中添加到现有TODOS并提交addTodo突变。 addTodo突变将待办事项更新为onAddTodo操作中的新TODO。

另外，在“组件”文件夹中，创建一个components/AddTodo.vue文件。此组件将呈现一个表单，该表单将允许用户将新Todo添加到现有列表中：

// @/components/AddTodo.vue
<template>
  <div>
    <form>
      <input type="text" v-model="title" placeholder="Add to do ..." />
      <input v-on:click="addNewTodo" type="submit" value="Add" />
    </form>
    <br />
  </div>
</template>
<script>
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "AddTodo",
  setup() {
    const store = useStore();
    const title = ref("");
    const addNewTodo = (e) => {
      e.preventDefault();
      store.dispatch("onAddTodo", {
        title: title.value,
      });
      title.value = "";
    };
    return {
      title,
      addNewTodo,
    };
  },
};
</script>

该组件类似于Todos组件。这里唯一的新事物是第17行的ref 函数。使用Vue 3，我们可以使用ref function在组件中的任何位置使变量变为响应式的。考虑这个片段：

// Declaration    
const title = ref("");

ref的Reactivity响应式

上面的片段创建具有初始值的title 响应式变量，其值空String。要读取变量的值，请执行title.value。您可以阅读更多关于Vue 3 Refs的信息。

最后，我们返回title变量，以及setup()中的addNewTodo fucntion，使其可用于模板中。如果在浏览器上查看应用程序，则应该能够添加TODOS：

过滤todos

调用fetch todos api时，返回数组包含200个todo。因此，它们提供了一个api来过滤可以获取的TODO数量。让我们创建一个过滤器组件，允许用户过滤他们想要获取的Todos的数量。创建一个src/components/FilterTodo.vue文件并使用下面的代码更新文件：

// @/components/FilterTodo.vue
<template>
  <div>
    <form @submit="filterTodos">
      <input type="number" v-model="limit" placeholder="Add to do ..." />
      <input @click.prevent="filterTodos" type="submit" value="Filter" />
    </form>
    <br />
  </div>
</template>
<script>
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "FilterTodos",
  setup() {
    const limit = ref(200);
    const store = useStore();
    const filterTodos = () => {
      store.dispatch("onFilterTodos", limit.value);
    };
    return {
      limit,
      filterTodos,
    };
  },
};
</script>

此组件呈现输入表单以收集要过滤的todos数量。提交后，调度onFilterTodos action。此action提交fetchTodos mutation，然后更新TODOS状态。让我们使用onFilterTodos action更新Vuex存储：

// @/store/index.js

import { ACTION_TYPES } from "../constants/action-types";
import Vuex from "vuex";
export default Vuex.createStore({
  state: {
    todos: [],
  },
  mutations: {
    // ...
    [ACTION_TYPES.fetchTodos]: (state, todos) => (state.todos = todos),
  },
  actions: {
    // ...
    onFilterTodos: async ({ commit }, limit) => {
      const response = await Axios.get(
        `https://jsonplaceholder.typicode.com/todos?_limit=${limit}`
      );
      commit(ACTION_TYPES.fetchTodos, response.data);
    },
  },
});

onFilterTodos action调用Typicode过滤endpoint，其中来自组件中的值。然后我们提交fetchTodos突变，该突变与响应数据更新Todos状态。让我们在浏览器上尝试一下：

项目repo

此项目可在GitHub上查看。完整的项目包含我们在本教程中无法涵盖的一些功能。其中一些是：

删除todos
更新todos
标记todos完成
切换todos可见性

结论

在此项目中，我们将标准Vue 2应用程序和Vuex重构成为一个全新的Vue 3应用程序。在这个过程中，我们看一些Vue 3的功能，如组合compositionAPI，这些功能和Vuex 4. Vue 3仍在改变，所以在阅读文章时，有些功能代码可能会有所不同，请根据官方Vue 3文档作出修改。

预期