在上一篇實戰演練中，已經將專案搭建好，并介紹了 Router、Vuex 的基本用法
接下來會以一個 Todo List 專案來介紹實戰中如何使用 Composition API
一、輸入框與串列（按鍵別名 + computed 型別宣告 ）
首先是輸入框，由于需要支持回車鍵提交，所以需要監聽 keydown 事件
如果是傳統的按鍵處理，需要在事件物件中根據 keyCode 來判斷按鍵
Vue 提供了一些常用的按鍵修飾符，不用在事件處理函式中再做判斷
比如這里就使用了 enter 修飾符，直接監聽 enter 鍵的 keydown 事件
串列部分，需要判斷當前串列是否為空，如果為空則展示空狀態
這里使用了 v-if 和 v-else 來做條件判斷，而其判斷條件 showList 是一個計算屬性 computed
在 TypeScript 的專案中，如果像 JS 專案一樣添加計算屬性，無法進行型別推斷
需要加上型別宣告：
// 在 setup() 中通過 computed() 注冊的計算屬性不需要宣告型別
二、添加、洗掉條目（在 setup 中使用 vuex）
創建的條目需要保存到 store 中，首先需要定義條目型別
然后在 state 中新增 todoList 欄位，用于保存串列
這里還添加了一個 todoListMap 欄位，是 todoList 的字典項，后面查找條目的時候會用到
同時在 mutations 中新增添加和洗掉方法
Store 已經調整好了，接下來只要在組件中呼叫即可
可以像之前介紹的那樣，使用 mapState 和 mapMutations 來匯出對應的欄位和方法
不過如果想在 setup 中使用 vuex，就需要用到 vuex 4 提供的 useStore 方法
import { useStore } from 'vuex';
export default {
//...
setup() {
const store = useStore();
console.log('store--->', store);
return { ...store.state }
}
}
從截圖可以看到，useStore() 的回傳值其實就是 $store
接下來的事情就簡單了，手動匯出需要用到的 state 和 mutations、actions 即可
這種方式匯出 state 還行，但對于 mutation 和 action，需要一個一個手動創建函式并匯出，就比較笨重
沒關系，我們還有 mapMutations 和 mapActions 可以使用
但需要注意，不要在 setup 使用 mapState！
因為 mapState 匯出 state 是一個函式（computed），這個函式內部使用了 this.$store
而 setup 中 this 是一個空值，所以在 setup 中使用 mapState 會報錯
如果確實希望以 mapState 的形式在 setup 中匯出 state，可以看一下 vuex-composition-helpers
import { useState, useActions } from 'vuex-composition-helpers';
export default {
props: {
articleId: String
},
setup(props) {
const { fetch } = useActions(['fetch']);
const { article, comments } = useState(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
三、查看條目詳情（在 setup 中使用 router）
在條目詳情頁，可以在 url 上攜帶條目 id，然后通過 id 在 store 中找到對應的資料
這就需要調整路由組態檔 src/router/index.ts，配置 vue-router 中的動態路由
路由配置好了，接下來需要在串列上添加“查看詳情”按鈕的處理函式
如果這個函式寫在 methods 里面，可以直接通過 this.$router.push() 來跳轉頁面
但是在 setup 中，就需要用到 vue-router 提供的 useRouter
import { useRouter } from 'vue-router';
export default {
// ...
setup() {
const router = useRouter();
const viewItem = (id: string) => {
router.push(`/about/${id}`);
};
return { viewItem };
}
}
然后在詳情頁，通過 useRoute（注意不是 userRouter ）獲取 params
四、小結
Vuex 和 vue-router 都提供了可以在 setup 中獲取實體的方法
這也側面體現了 Vue 3 的 setup 是一個獨立的鉤子函式
它不會依賴于 Vue 組件實體，如果需要用到函式外部的變數，都需要從外部獲取
同時也提醒我們在開發 Vue 3 的插件的時候，一定要提供相應的函式讓開發者能在 setup 中使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/204532.html
標籤：其他
上一篇：深圳某公司中了.Ranzy Locke后綴的勒索病毒，成功修復的秘訣是什么？
下一篇：CSS浮動