使用vite-vue3-ts快速上手做一個todolist

版本信息：

vite 2.4.4

vue 3.0.5

typescript 4.3.5

npm install 安裝依賴， npm run dev 啟動項目，體驗。

成品展示

開發思路

1. 拆分模塊
2. 設計數據存儲方式
3. 規范數據類型
4. 詳細拆分各模塊功能

知識點

setup

setup() {
  
  const Z:number = ref(0) 
  
  const X = ()=>{
    //method
  }
  
  const function Y() {
    
  }
  
  // 需要在外面繼續使用的值/方法，要用 return 返回
  return {
    Z,
    X,
    Y
  }
}

reactive——響應性基礎API

// 這里是一個用state={todosList: Array<ItemData>/ItemData[]} 解構,后面具體內容按照解構的類型
    const state = reactive<{ todosList: Array<ItemData> }>({
        todosList: []
        // todosList: [
        //   { id: 1, title: "張三", isCompleted: false },
        //   { id: 2, title: "李四", isCompleted: false },
        //   { id: 3, title: "瑞斯", isCompleted: false }
        // ]
      }
    );

toRefs

<div class="todosList">
    <Header :addPlan="addPlan"></Header>
    <List :todosList="todosList"></List>
    <Footer :todosList="todosList" :isCompletedAll="isCompletedAll" :clearCompleted="clearCompleted
    "></Footer>
  </div>

		return {
      // 將state中的所有屬性轉換為ref對象 ，用的時候直接使用屬性名稱即可
      ...toRefs(state),
      // todosList,
    };

watch

// （監聽的數據源，要執行的方法，配置監聽的options）
watch(() => state.todosList, saveTodos, { deep: true }); 

provide / inject——祖孫傳遞

// 祖 App.vue
const delPlan = (id: number) => {
      // console.log("刪除");
      state.todosList.splice(id, 1);
    };
 // 傳遞出去
    provide("delPlan", delPlan);

/*===================================================================*/
// 孫 Item.vue
// 通過 inject 拿到祖父傳過來的方法
    const delTodo: Function | undefined = inject("delPlan");

    const del = (index: number) => {
      // console.log(index);
      if (window.confirm("確認刪除嗎？")) {
        if (typeof delTodo === "function") delTodo(index);
      }
    };

computed

<div class="todoItem">
    <input class="checkbox" type="checkbox" v-model="isCompleted" />
    <!--    <input type="text" :readonly="true" v-model="todoItem.title">-->
    <span class="title">{{ todoItem.title }}</span>
    <button class="delButton" @click="del(index)">刪除</button>
  </div>

const isCompleted = computed({
        // 通過 computed 的 get 實現 isCompleted 數據的綁定，
        get: () => {
          return props.todoItem.isCompleted;
        },
        // 通過 set 創建可寫的 ref 對象 實現對狀態的更改
        set: val => {
          if (typeof updateState === "function") updateState(props.todoItem, val);
        }
      }
    );

as——類型強轉

props: {
  todoItem: {
    // 約束類型，使用as強轉類型
    type: Object as () => ItemData,
    required: true
  },
  index: {
    type: Number
  }

onMounted——生命周期

// 掛載后讀取本地數據，存入todosList
onMounted(() => {
  setTimeout(() => {
    state.todosList = readTodos();
    // console.log(state.todosList);
  }, 500);
});

props

在setup內不能使用this，所以傳遞值通過props來傳遞，實現雙向綁定，和 React 非常相似

export default defineComponent({
    name: "Footer",
    props: {
      todosList: {
        // type: Array as ()=>ItemData[],
        type: Array,
        required: true
      },
      isCompletedAll: {
        type: Function,
        required: true
      },
      clearCompleted: {
        type: Function,
        required: true
      }
    },
    setup(props) {
      // reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
      const count = computed(() => {
        return props.todosList.reduce((pre: number, todo: ItemData) => pre + (todo.isCompleted ? 1 : 0), 0);
      });
      // 是否全選操作
      const isCheckedAll = computed({
        get: () => {
          // console.log(count)
          return count.value > 0 && count.value === props.todosList.length;
        },
        set: val => {
          props.isCompletedAll(val);
        }
      });

      return {
        count,
        isCheckedAll
      };
    }
  }
);

interface——規范類型

// 定義接口 ItemData ，約束傳入的數據類型
export interface ItemData {
  id: number;
  title: string;
  isCompleted: boolean;
}

存儲數據的工具類

import { ItemData } from "../model/ItemData";

function saveTodos(todos: ItemData) {
  localStorage.setItem("todos_key", JSON.stringify(todos));
}

function readTodos(): ItemData[] {
  // console.log(JSON.parse(localStorage.getItem("todos_key") || "[]"))
  return JSON.parse(localStorage.getItem("todos_key") || "[]");
}

export { saveTodos, readTodos };

遇到的問題

導入組件問題

1. 引入 vue 組件時，需要添加后綴名.vue，在 webStorm 修改設置

2. vue3 導入組件依然需要在component中注冊

<template>
  <div>
    todolist
    <Header></Header>
    <List></List>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";

export default defineComponent({
  name: "App",
  components: {
    Header,
    List,
    Footer
  }
});
</script>

遺留問題

1. TS報錯

/**
 *  ! 報錯問題
 */
watch(() => state.todosList, saveTodos, { deep: true });

setup(props) {
      // reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
      const count = computed(() => {
        return props.todosList.reduce((pre: number, todo: ItemData) => pre + (todo.isCompleted ? 1 : 0), 0);
      });
}

Find me

Gitee：https://gitee.com/heyhaiyon/vite-vue3-ts-todolist.git

微信公眾號：heyhaiyang

掘金：heyhaiyang

博客園：heyhaiyang

頭條號：heyhaiyang