如何在操縱桿中使用 Getter 和 Setter 實現 API
如何在 Joystick 中使用 getter 和 setter 定義 HTTP API，並通過 @joystick.js/ui 中的 get() 和 set() 方法從用戶界面調用這些 getter 和 setter。
開始使用
在本教程中，我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。
首先，我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性（如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本，請先閱讀本教程）：
終端
npm i -g @joystick.js/cli
這將在您的計算機上全局安裝操縱桿。安裝好之後，接下來我們新建一個項目：
終端
joystick create app
幾秒鐘後，您將看到一條消息已註銷到 cd 進入你的新項目並運行 joystick start ：
終端
cd app && joystick start
在此之後，您的應用應該可以運行了，我們可以開始了。
在操縱桿中定義和加載模式
在 Joystick 應用中，您的整個 API 被稱為 schema .架構是包含兩個屬性的 JavaScript 對象：getters 和 setters ，兩者都設置為各自的對象。
正如他們的名字所暗示的那樣，getters 對象包含您的 API 端點 getting 數據或從數據庫中讀取數據和 setters 對象包含 設置 的 API 端點 或創建、更新和刪除數據。
首先，我們將連接一個沒有定義任何 getter 或 setter 的基本模式，並通過 node.app() 將其加載到我們的應用程序中 為我們的應用程序啟動服務器的函數。
/api/index.js
export default {
getters: {},
setters: {},
};
我們想在 index.js 中定義我們的模式 /api 下的文件 我們項目的根目錄。同樣，您的架構只是一個具有 getters 的對象 和 setters 屬性，每個設置為一個對象。因為我們打算在 /index.server.js 中導入這個 接下來的文件，我們使用 export default 聲明。
/index.server.js
import node from "@joystick.js/node";
import api from "./api";
node.app({
api,
routes: {
"/": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"*": (req, res) => {
res.render("ui/pages/error/index.js", {
layout: "ui/layouts/app/index.js",
props: {
statusCode: 404,
},
});
},
},
});
在我們的 /index.server.js 中 文件，我們已經導入了 api 在頂部歸檔。注意我們使用了api這個詞 因為這是 node.app() 的名稱 函數希望我們將模式傳遞為（再次，api 和 schema 可以互換使用，一個好記的短語是“API 由模式定義”）。因為我們做了一個 export default 回到 /api/index.js , 在這裡，我們省略了花括號（用於創建 named 出口）。
在傳遞給 node.app() 的選項對像上 ，我們設置了 api 作為屬性，使用 JavaScript 簡寫自動分配 api 的值 我們在頂部導入的值作為 api 的值 node.app() 上的屬性 選項對象。所以很清楚，這就相當於說：
import node from "@joystick.js/node";
import api from "./api";
node.app({
api: api,
routes: { ... },
});
這就是定義我們的基本模式並將其加載為我們的 API 的過程。現在，當我們的應用啟動時（或者在這種情況下，重新啟動，因為我們已經在上面啟動了我們的應用），架構將被加載並可供請求使用。
接下來，我們將通過添加一個 getter 端點來構建我們的架構。
定義一個 getter 端點
就像我們之前暗示的那樣，在 Joystick 應用程序中，有兩種類型的 API 端點：getter 和 setter。 Getter 是預期 HTTP GET 的 HTTP 端點 請求被發送給他們。 getter 的特別之處在於三個方面：
- Getter 可以選擇進行輸入驗證，以幫助您驗證在調用 getter 時傳遞給它的輸入值是否正確。
- 調用時，可以向 getter 傳遞
output定義，允許您自定義 getter 的返回值，並描述您期望返回調用的值。 - 如果可用，getter 將自動獲得對您在應用中加載的任何數據庫以及登錄用戶（如果存在）的訪問權限。
好在這個功能不僅可以通過 Joystick 的內置方法來調用 getter（我們稍後會看到）——它們也被定義為普通的 HTTP 端點，例如：http://localhost:2600/api/_getters/posts 或 http://localhost:2600/api/_getters/name-with-spaces .這意味著您可以使用常規的 fetch() 訪問您的 getter 或訪問您的 API 端點的函數外部 沒有任何特殊代碼的操縱桿。
/api/posts/getters.js
export default {
posts: {
input: {},
get: () => {
// We'll respond to the getter request here...
},
},
};
為了保持我們的 API 井井有條，我們將把 getter 定義拆分到它們自己的文件中（從技術上講，我們可以將它們直接寫入我們的模式，但這是一個壞習慣，會隨著模式的增長而造成混亂）。上面，在我們現有的 /api 下 在我們應用的根目錄下，我們創建了另一個文件夾 posts 在其中，一個 getters.js 文件。
這裡的想法是我們的 API 由“資源”或“主題”組成。每個資源或主題都有多個與其自身相關的端點。比如這裡，我們的資源是posts 它將具有與帖子相關的 getter 端點，然後是與帖子相關的 setter 端點。使用這種模式，我們可以讓我們的代碼易於導航，更重要的是：易於長期維護。
就像我們之前在模式中看到的那樣，定義一個單獨的 getter 只需要編寫一個 JavaScript 對象。在這裡，我們 export default 一個對象，我們所有與帖子相關的 getter 都將分配給該對象。每個 getter 都被定義為該對象的一個屬性（例如，posts ) 分配給具有自己的兩個屬性的對象：input 和 get() .
input 是我們為調用時傳遞給我們的 getter 的任何輸入定義可選驗證的地方。 get() 是一個函數，我們可以執行任何必要的工作來響應 getter 請求（即，從某個數據源獲取請求的數據）。 get() 功能在技術上是開放式的。雖然通常我們希望調用函數內部的數據庫，但 Joystick 並不關心 在哪裡 你的數據來自哪裡，只是你從函數中返回。
/api/posts/getters.js
export default {
posts: {
input: {
category: {
type: "string",
optional: true,
},
},
get: (input, context) => {
// We'll respond to the getter request here...
},
},
};
擴展我們的 posts 現在，我們正在為調用 getter 時預期的輸入添加一些驗證。驗證是使用操縱桿的內置驗證庫定義的。該庫接受一個對象，就像我們看到的傳遞給 input 的對像一樣 上面並將其與 input 進行比較 我們在調用 getter 時收到的值。
在該對像上，我們定義的屬性名稱與我們通過 getter 請求傳遞的輸入中的屬性名稱相同。例如，假設我們在請求中發送了這樣的對象：
示例輸入對象
{
category: 1234
}
我們會尋找匹配的 category 我們的驗證對像上的屬性——稱為 field ——看看它是否有 validator 分配給它（我們用於在驗證時分配給屬性的對象的名稱）。如果是，我們檢查請求傳遞的值是否符合 rules 的預期 在驗證器上。
這種驗證的酷炫之處在於它可以無限嵌套以適應輸入對象的結構 .您甚至可以驗證嵌套對象和對像數組，使其非常靈活。為了滿足我們的需求，我們現在保持簡單並專注於單個字段 category 我們要驗證的值等於 typeof 字符串 if 它存在（如果因為該字段被標記為可選）。
在上面的示例中，請注意我們有意傳遞 category 在我們的示例調用中作為整數，而不是字符串。這是為了說明當我們的 getter 被調用時，驗證將失敗並停止請求，因為驗證需要 category 字段包含一個字符串，而不是一個整數。
/api/posts/getters.js
export default {
posts: {
input: {
category: {
type: "string",
optional: true,
},
},
get: (input, context) => {
const query = {};
if (input.category) {
query.category = input.category;
}
return context.mongodb.collection('posts').find(query).toArray();
},
},
};
接下來，使用我們的驗證集，我們要連接我們的 get() 功能。請記住，這是一個被調用的函數，預計會返回我們試圖獲取的數據，假設我們為 input 傳遞的數據 通過驗證步驟。
我們的 get() 函數有兩個參數：input 通過 getter 請求和 context 傳遞的經過驗證的輸入對象 . context 是一個包含幾個不同事物的對象：
context.reqExpress.js 路由給我們的入站 HTTP 請求，getter 被定義為。context.res由 Express.js 路由提供給我們的入站 HTTP 響應，getter 被定義為。context.user應用的登錄用戶（如果有）。context.<db><db>是您的應用中加載的數據庫之一的名稱（例如，context.mongodb)。
專注於我們的 get() 的主體 函數，記住：我們定義了一個名為 posts 的 getter 所以我們希望我們的 getter 會返回一些帖子。
為此，我們預計與 MongoDB 的連接被定義為 context.mongodb （這是當您使用 joystick start 運行新創建的應用程序時 Joystick 自動啟動的默認數據庫 )。
在我們使用它之前，首先，我們創建一個變量query 這將作為我們想要傳遞給 MongoDB 的“基本”查詢（空對像在 MongoDB 的查詢語言中表示“全部”）。如果 input.category 已定義（請記住，它是可選的，因此它可能不會出現在 input 中 )，我們要在查詢對像上設置傳遞的類別。假設我們通過了 "tutorials" 對於 input.category ，我們希望為 query 得到類似的東西 ：
{ category: "tutorials" }
使用我們的 query 定義好了，接下來，我們調用 MongoDB 驅動程序並運行我們的查詢。這可能看起來很奇怪。對於數據庫，Joystick 所做的只是在本地計算機上啟動數據庫並使用該數據庫的 Node.js 驅動程序建立連接。換句話說，context.mongodb 之後的所有內容 這是“MongoDB 驅動程序在 Node 中的工作方式”。操縱桿不會修改它——它會連接到數據庫並將其設置為 context.mongodb .就是這樣。
我們期望從這行返回的是一個 JavaScript 對像數組，每個對象代表一個在數據庫中定義的帖子。
這就是定義吸氣劑的過程！接下來，我們將看看如何定義一個 setter（遵循與我們在上面學到的幾乎相同的模式），然後學習如何將該 setter 和我們剛剛在上面定義的 getter 分配回我們的架構。
定義 setter 端點
就像我們在上面所做的一樣，我們想將我們的 setter 定義拆分到他們自己的文件中。同樣，因為我們正在處理 posts 資源（或“主題”，如果您願意），我們將堅持使用 /api/posts 文件夾，但是這一次，我們將創建一個 /api/posts/setters.js 文件：
/api/posts/setters.js
export default {
createPost: {
input: {
title: {
type: "string",
required: true,
},
category: {
type: "string",
required: true,
},
body: {
type: "string",
required: true,
},
tags: {
type: "array",
optional: true,
element: {
type: "string"
}
},
},
set: (input, context) => {
return context.mongodb.collection('posts').insertOne({
_id: joystick.id(),
...input
});
},
},
};
完全相同的約定在起作用。這裡最大的區別是我們為導出對像上設置的屬性使用了不同的名稱（對於我們的 getter，我們使用了名稱 posts ，現在我們使用名稱 createPost 對於我們的二傳手）和 get() 該屬性值的函數已更改為 set() .
就行為和期望而言，其他一切都是相同的。從技術上講，如果我們願意，我們可以“獲取”而不是“設置”一些數據。 set() 的名稱 這裡的功能是暗示性的 但在技術上不受任何限制。 Setter 的行為與 getter 相同，它們接受一些輸入，通過一些驗證（如果已定義），然後傳遞該 input context 旁邊 到一個函數。
同樣，該功能是開放式的，就像 get() 一樣 在我們的 getter 上運行。你可以在這裡調用任何你喜歡的代碼——命名只是幫助組織你的 API 的約定。
查看我們的驗證，最大的不同是我們添加了更多字段並且我們使用了 "array" tags 的類型規則 場地。請注意，當我們設置 type 對於“數組”，我們還可以傳遞一個 element 字段設置為嵌套的操縱桿驗證對象。 記住：操縱桿驗證可以無限嵌套 .
對於我們的 set() 函數，就像我們之前看到的，我們正在訪問分配給 context.mongodb 的 MongoDB 驅動程序 .然而，這一次，我們調用的是 posts 集合的 insertOne 方法。對於那個方法，我們傳遞了一個我們正在創建的對象，它是 input 的組合 值（我們使用 JavaScript 擴展運算符將內容“解包”到我們傳遞給 .insertOne() 的對像上 ) 和一個 _id 字段。
該字段被設置為調用 joystick.id() .在幕後，Joystick 在服務器上公開了一個名為 joystick 的全局變量 其中有一個 .id() n的隨機十六進製字符串ID生成方法 長度（默認為 16 個字符）像這樣：FYIlLyqzTBJdGPzz .
這對我們的二傳手來說是這樣的。接下來，讓我們將我們的 getter 和 setter 添加到我們在本教程前面設置的架構中。
將我們的 getter 和 setter 分配回模式
回想一下，之前我們定義了基本模式並將其添加到 node.app() 選項對象為 api .但是，該模式沒有定義任何 getter 或 setter ——每個都只是空對象。真快，讓我們拉入 /api/posts/getters.js 文件和 /api/posts/setters.js 我們剛剛創建的文件並將它們設置在架構上。
/api/index.js
import postGetters from './posts/getters';
import postSetters from './posts/setters';
export default {
getters: {
...postGetters,
},
setters: {
...postSetters,
},
};
簡單的。在這裡，我們將 getter 和 setter 添加到模式中所做的就是導入我們從每個文件中導出的對象，然後在適當的 getters 或 setters 對象，使用 JavaScript 擴展運算符 ... 將這些對象“解包”到它們的父對像上。在這裡，我們使用 singular 的命名約定 我們的資源/主題名稱的形式，後跟“getters”或“setters”（駝峰式）。
而已。最後，讓我們看看如何真正調用 我們在應用程序中的 getter 和 setter。
通過@joystick.js/ui 調用getter 和setter
作為一個全棧 JavaScript 框架，Joystick 將我們的前端和後端方便地結合到一個應用程序中。現在，我們將遠離應用程序的服務器端，並專注於客戶端（瀏覽器）。當我們運行 joystick create 早些時候，Joystick 給了我們一個渲染到 / 的示例頁面組件 index.server.js 中我們應用的索引路由 （您可能在我們連接 API 時發現了這一點）。現在讓我們在 /ui/pages/index/index.js 中打開那個頁面組件 .
/ui/pages/index/index.js
import ui from "@joystick.js/ui";
import Quote from "../../components/quote";
const Index = ui.component({
methods: {
handleLogHello: () => {
console.log("Hello!");
},
},
events: {
"click .say-hello": (event, component) => {
component.methods.handleLogHello();
},
},
css: `
div p {
font-size: 18px;
background: #eee;
padding: 20px;
}
`,
render: ({ component, i18n }) => {
return `
<div>
<p>${i18n("quote")}</p>
${component(Quote, {
quote: "Light up the darkness.",
attribution: "Bob Marley",
})}
</div>
`;
},
});
export default Index;
在這個文件中，我們有一個使用 @joystick.js/ui 創建的示例操縱桿組件 包（@joystick.js/node 的伴侶 我們之前在服務器上看到的包）。 @joystick.js/ui 是一個使用純 HTML、CSS 和 JavaScript 創建用戶界面組件的庫。
上面的大部分代碼現在對我們來說並不是非常重要。我們現在要做的是修改這個組件來渲染兩個東西：
- 用於創建新帖子的表單。
- 一種顯示我們通過
posts檢索到的帖子的方式 getter 端點。
/ui/pages/index/index.js
import ui, { get, set } from "@joystick.js/ui";
const Index = ui.component({
state: {
posts: [],
},
lifecycle: {
onMount: (component) => {
component.methods.handleFetchPosts();
},
},
methods: {
handleFetchPosts: async (component) => {
const posts = await get('posts', {
input: {
category: "opinion",
},
output: [
'title',
'body'
],
});
component.setState({posts});
},
},
events: {
"submit form": (event, component) => {
event.preventDefault();
set('createPost', {
input: {
title: event.target.title.value,
category: event.target.category.value,
body: event.target.body.value,
tags: event.target.tags.value.split(',').map((tag) => tag.trim()),
},
}).then(() => {
event.target.reset();
component.methods.handleFetchPosts();
});
},
},
css: `
ul {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
li {
border: 1px solid #eee;
padding: 20px;
}
li strong span {
font-weight: normal;
color: #aaa;
}
`,
render: ({ state, each }) => {
return `
<div>
<div class="posts">
<h4>Posts</h4>
<ul>
${each(state.posts, (post) => {
return `
<li>
<strong>${post.title} <span>${post.category}</span></strong>
<p>${post.body}</p>
</li>
`;
})}
</ul>
</div>
<form>
<label for="title">Title</label><br />
<input name="title" placeholder="title" />
<br />
<label for="category">Category</label><br />
<select name="category">
<option value="tutorials">Tutorials</option>
<option value="opinion">Opinion</option>
<option value="meta">Meta</option>
</select>
<br />
<label for="body">Body</label><br />
<textarea name="body"></textarea>
<br />
<label for="tags">Tags</label><br />
<input name="tags" placeholder="tag1,tag2,tag3" />
<br />
<button type="submit">Create Post</button>
</form>
</div>
`;
},
});
export default Index;
保留現有組件的骨架，在這裡，我們交換了正在渲染的內容和組件的核心功能。這是有目的的。重複使用 /ui/pages/index/index.js 組件是為了避免需要連接一個全新的組件和路由，並讓我們專注於我們的 getter 和 setter。
看這裡的代碼，最重要的部分在render()下面 功能。使用 @joystick.js/ui 構建組件時 ，我們return render() 中的 HTML 字符串 使用反引號的函數。這使我們能夠利用 JavaScript 的字符串插值（也稱為“模板文字”）將值動態“注入”到字符串中的 HTML 中。
在幕後，Joystick 使用我們注入的值獲取 HTML，並將其呈現給瀏覽器。在我們這裡的代碼中，為了演示我們的 getter 和 setter，我們想要渲染兩件事：從數據庫中獲取現有帖子的列表（從我們的 getter 中檢索）和用於添加新帖子的表單（誰的內容通過我們的 setter 傳遞)。
因為我們的數據庫中還沒有任何帖子，接下來，我們要查看 events 在我們傳遞給 ui.component() 的對像上設置的屬性 .這是我們在 Joystick 組件中定義 JavaScript DOM 事件的地方。我們要監聽的每個事件都分配給我們傳遞給事件的對象。我們通過將鍵或屬性名稱設置為一個字符串來創建一個偵聽器，該字符串首先包含我們要偵聽的 DOM 事件的類型（在我們的示例中，submit ) 以及我們想要監聽該事件的元素 on （在我們的示例中，form )。
對於該屬性，我們分配一個函數，只要該事件在瀏覽器/DOM 中發生，就會調用該函數。對於我們的示例，我們想調用我們的 setter createPost 每當此事件發生時在服務器上。為了調用它，我們在頂部添加了一個 named set() 的導入（用大括號表示） @joystick.js/ui 中包含的函數 .這是 JavaScript fetch() 的包裝函數 瀏覽器內置的用於執行 HTTP 請求的方法。
它為我們提供了一個簡單的 API 來執行我們的請求。它接受我們要調用的設置器的名稱作為其第一個參數的字符串，後跟一個選項對象。在該選項對像上，在這裡，我們從表單中傳遞值。我們通過訪問 DOM event 來做到這一點 對象通過操縱桿傳遞給我們的函數。
因為 Joystick 讓我們可以訪問原生 DOM 事件，所以我們可以通過 event.target.<field>.value 直接訪問我們輸入的值 其中 event.target 指<form></form> 收到提交事件的元素和 <field>.value 等於帶有 name 的輸入值 屬性等於 <field> 在我們渲染的 HTML 中。
這很清楚，如果我們有像 <input name="pizza" /> 這樣的輸入 在我們的 HTML 中，我們會寫類似 event.target.pizza.value .
這樣，我們的 setter 就可以被調用了。請記住：我們在服務器上所做的只是將經過驗證的輸入傳遞給 MongoDB 以放入我們的 posts 數據庫中的集合。
調用我們的 setter 後，我們就可以進行下一步了：從數據庫中獲取我們的帖子。
因為我們期望 set() 從 @joystick.js/ui 導入的方法 要返回一個 JavaScript Promise，在調用該函數結束時，我們鏈接一個 .then() 方法，傳遞一個我們希望在 setter 請求完成後運行的回調函數。
在裡面，我們調用 .reset() 我們表單上的方法（重用 event.target 傳遞給我們的 DOM 事件偵聽器）以清除該字段，然後調用在我們的組件 handleFetchPosts() 上定義的自定義方法 .我們可以訪問它，因為在 events 上定義的所有 DOM 事件偵聽器 組件的對象接收 DOM event 作為第一個參數和整個 component 實例作為第二個參數。
/ui/pages/index/index.js
import ui, { get, set } from "@joystick.js/ui";
const Index = ui.component({
state: {
posts: [],
},
lifecycle: {
onMount: (component) => {
component.methods.handleFetchPosts();
},
},
methods: {
handleFetchPosts: async (component) => {
const posts = await get('posts', {
input: {
category: "opinion",
},
output: [
'title',
'body'
],
});
component.setState({ posts });
},
},
events: {
"submit form": (event, component) => {
event.preventDefault();
set('createPost', { ... }).then(() => {
document.querySelector('form').reset();
component.methods.handleFetchPosts();
});
},
},
css: `...`,
render: ({ state, each }) => {
return `
<div>
<div class="posts">
<h4>Posts</h4>
<ul>
${each(state.posts, (post) => {
return `
<li>
<strong>${post.title} <span>${post.category}</span></strong>
<p>${post.body}</p>
</li>
`;
})}
</ul>
</div>
<form>
...
<button type="submit">Create Post</button>
</form>
</div>
`;
},
});
export default Index;
methods 分配給 Joystick 組件的對象包含我們想要調用的與我們的組件相關的各種函數。這些方法可以通過 component 從我們組件中的任何位置訪問 實例（傳遞給操縱桿組件中的所有函數）。
就像我們剛剛在 .then() 中看到的那樣 我們的 set() 回調 調用 events ，我們可以直接通過編寫component.methods.<methodName>來調用一個方法 .
為了我們的需要，我們想要連接一個調用我們的 posts 的方法 服務器上的 getter 並檢索我們的數據。類似於我們通過 set() 調用我們的 setter , getter 的兄弟方法是 also 從 @joystick.js/ui 導出 稱為get() .
不出所料，get() 將我們想要調用的 getter 的名稱作為其第一個參數的字符串，然後將一個選項對像作為其第二個參數。請記住，之前在連接我們的 getter 端點時，我們預計可能會出現 category 為我們的輸入傳遞的值。在我們的示例中，我們傳遞 "opinion" 作為一個類別名稱來表示“當你運行這個 getter 時，只返回帶有 category 的帖子 字段等於 opinion 。”
如果我們往下看我們的 render() 函數，我們可以在這裡使用三個類別之一：tutorials , meta , 或 opinion .
除了我們的 input ，Joystick 中 getter 和 setter 的一個獨特功能是 output 選項（在操縱桿中稱為 SelectiveFetch）。輸出允許您傳遞從 getter 返回的對像或對像數組的特定字段以自定義其輸出。這使得在多個地方重用 getter 成為可能，從而根據 UI 的需求定制輸出。為了在此處演示這一點，我們將傳遞在每個帖子中定義的四個字段中的兩個 title 和 body .
在服務器上，在 Joystick 發回我們的數據之前，它會通過 output 數組並刪除您沒有要求的任何數據。在這裡，因為我們通過 title 和 body 在我們的數組中，我們說“在每個帖子對像上，只給我帖子的標題和正文，丟棄其他所有內容。”如果我們註釋 output 選擇退出並重新運行我們的 getter，我們會看到 all 字段顯示，而不是僅顯示我們在 output 中傳遞的內容 .
就像 set() 我們之前看到的方法，我們期望 get() 返回一個 JavaScript Promise。展示處理來自 get() 的響應的不同方式 （您可以使用與 set() 相同的模式 )，我們使用 JavaScript async/await 模式來跳過對 .then() 的需要 回調。
這通過分配關鍵字 async 來工作 到 await 所在的父函數 將使用關鍵字。我們把 await 在我們調用 get() 之前的關鍵字 說“等到這個 getter 響應，然後將響應值分配給變量 posts .
使用這個變量（假設它包含一個我們從 getter 返回的帖子數組），我們接受 component 實例（對於 methods ，這會自動作為最後一個可能的參數傳遞——在這種情況下，它是第一個，因為我們沒有將任何其他參數傳遞給 handleFetchPosts() 當我們調用它時）並利用它的 .setState() 設置state.posts的方法 將組件上的值添加到我們從 getter 接收到的數組中。
我們可以看到 state 我們組件頂部的對像被賦予默認的 posts 值設置為空數組。當我們的 getter 運行時，假設我們從 getter 返回數據，我們將自動填充這個數組。在我們的 render() 方法，我們使用 each() 操縱桿中的渲染函數表示“對於 state.posts 中的每個帖子 , 調用這個函數，它會渲染一個 HTML 字符串並接收我們正在循環的當前帖子（或值）。”
反過來，我們期望 <li></li> 使用每個帖子的 title 在屏幕上呈現的標籤 , category 和 body 注入其中。
在我們對此進行測試之前，請注意最後一點。請注意，我們還添加了一個對象 lifecycle 到我們的組件。該對象允許我們定義在組件“生命週期”或“組件當前正在做什麼”的不同階段調用的函數。 Joystick 中有三種生命週期方法：onBeforeMount , onMount , 和 onBeforeUnmount .
在這裡，我們使用 onMount 說“當這個組件呈現時，調用 handleFetchPosts() methods 中的方法 對象。”我們期望的是，當我們的組件第一次在屏幕上渲染時，它會去獲取任何現有的帖子並將它們置於狀態，觸發我們的 HTML 中的重新渲染並在屏幕上顯示帖子列表。每次我們添加新帖子時，我們也期望相同的行為（這意味著帖子一旦添加到數據庫中就會顯示在屏幕上）。
而已！讓我們試運行一下，看看它是如何工作的。
總結
在本教程中，我們學習瞭如何使用 Joystick 的 getter 和 setter 創建一個簡單的 API。我們學習瞭如何創建 getter 和 setter，然後將它們加載到我們的模式中，並將該模式作為我們的 API 附加到我們的應用程序中。我們還學習瞭如何使用 get() 在瀏覽器中調用 getter 和 setter 和 set() @joystick.js/ui 中包含的方法 圖書館。
