如何设置 Vue 3 Composition API (Typescript) todo list app with reactive method

Question

我正在尝试使用带有打字稿的 Vue 3 Composition API 构建一个基本的待办事项列表应用程序。我之前为我的组件配置了设置函数，以使用 ref 方法来处理传递到 listItems 数组的用户输入的反应性。现在我正在尝试重构我的设置函数以使用 reactive 方法，并将我的待办事项应用程序的属性安排为一个对象。在我创建的状态对象中，我将 newTodo 初始化为一个空字符串，将 listItems 初始化为一个字符串数组。然后调用 addTodo 函数将用户输入的 newTodo 值推送到 listItems 数组中。但是，通过此设置，我现在收到一个解析错误，指出需要一个标识符。此错误似乎针对状态对象中的列表项属性：listItems: <string[]>[]。我想假设这意味着需要将一个 id 添加到状态对象以便附加到每个列表项，但我不确定如何动态处理它。知道如何解决这个问题吗？请参阅下面的代码：

模板

<template>
  <div class="container">
      <form @submit.prevent="addTodo()">
          <label>New ToDo</label>
          <input
              v-model="state.newTodo"
              name="newTodo"
              autocomplete="off"
          >
          <button>Add ToDo</button>
      </form>

    <div class="content">
      <ul>
        <li v-for="listItem in state.listItems" :key="listItem">
          <h3>{{ listItem }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

脚本

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'Form',
  
  setup() {
    const state = reactive({
      newTodo: '',
      listItems: <string[]>[]
    })

    const addTodo = () => {
      state.listItems.push(state.newTodo)
      state.newTodo = ''
    }

    return { state, addTodo }
  }
});
</script>

Answer 1

您必须像这样在 reactive 中使用泛型：

const state = reactive<{ newTodo: string; listItems: string[] }>({
  newTodo: "",
  listItems: [],
});

你也可以这样转换 listItems 状态 :

const state = reactive({
  newTodo: "",
  listItems: [] as string[],
});

不过我觉得第一种方案更好

如何设置 Vue 3 Composition API (Typescript) todo list app with reactive method

How to set up Vue 3 Composition API (Typescript) todo list app with reactive method

typescript

vue.js

vue-component

vuejs3

vue-composition-api