待办事项应用程序：Composition API 作为 Vuex 的替代方案

在阅读了Anthony Gore关于使用新的Composition API作为 Vuex 的某种替代品的文章后，对于较小的项目，我采用了在 Codepen 中构建的一个简单的待办事项应用程序，然后我创建了一个新的Vue 3应用程序（使用 vue cli），最后，我将每个组件的所有状态和变异方法移动到一个文件（global.js - 在 Vuex 中，它将类似于商店）。

源代码和前言

以下是我将在本文中参考的源代码和 Codepen 的列表：

Codepen： Vue 待办事项应用程序

GitHub 仓库： todo-app-vue3

Netlify： https://relaxed-yonath-fa8475.netlify.app/

如果您看一下我在Codepen中创建的待办事项应用程序，您会注意到我甚至没有使用 Vuex，我只是使用两个props将数据传递给子组件，并使用$emit将数据传递/通信给父组件。

新的Composition API的优点之一是，现在我们可以访问组件之外的反应式功能，这非常强大。

因此，在创建Vue 3应用程序并将组件代码放入其自己的文件中并基本上使应用程序像在 Codepen 上一样工作之后，我所做的事情如下：

将状态和变异函数移动到全局文件

我做的第一件事是在中创建 global.js 文件/src。

在里面global.js，我导入了reactive和readonlyAPI。让我们看一下“global.js”中的代码——我会在代码片段中添加注释。

import { reactive, readonly } from "vue";

/* 
Wrapping our object with reactive() makes, 
as it clearly suggests, our object reactive 
(it even affects all nested properties).
*/

const state = reactive({
  tasks: [
     {
      id: 1,
      description: "Finish the course",
      done: false,
     }, 
     {..}, 
     {..}, 
     {..}, 
     {..}
  ],
  nextId: 6,
  tasksFiltered: [],
  activeTab: "all",
})

/* 
All these functions below are a combination of
mutations and actions (when comparing with Vuex).
But, of course, we are always free to organize our code
however we want.
*/

const filterTodos = function(filterOption) {..}

const addTodo = function(todo) {..}

const deleteTask = function(task) {..}

const toggleTaskStatus = function(task) {..}

// Export an object with the state and mutations
export default { 
  // With readonly(), we prevent our state to be mutated
  // outside of the global.js module
  state: readonly(state), 
  filterTodos, 
  addTodo, 
  deleteTask, 
  toggleTaskStatus
}