TypeScript에서 Storyblok 브리지 구성

스토리블록이란 무엇인가요?

코드

TypeScript Storyblock 브리지

보시다시피 코드의 성능은 JavaScript와 완전히 같습니다.그것은 추가 또는 다른 기능이 없고, 단지 쉽게 틀리지 않는 버전일 뿐이다

우리를 좀 더 깊이 잠입시켜라

탐색 코드

Vue 3.0 및 작성 API

TypeScript 코드는 Vue 3.0의 Composition API을 사용합니다.그 중 하나는 Ref 함수입니다.파일 맨 위에 있는 Vue 3.0 라이프 사이클 연결을 통해 가져온 것입니다:

import { defineComponent, useFetch, useContext, ref, onMounted } from '@nuxtjs/composition-api'

onMounted 및 $Storybridgeon（）

onMounted 함수는 대부분의 기능이 나타나는 곳이다.이 함수에서 우리는 $storybridge.on() 함수를 호출합니다

app.$storybridge.on('input', (event: StoryblokEventPayload)...

이것은 StoryblokEventPayload 유형 사건의 탐지기와 같다

StoryblokEventPayload

StoryblokEventPayload 형식은 index.d.ts 파일을 통해 공개된 인터페이스로 이 파일은 Storyblok Nuxt 모듈에서 찾을 수 있습니다.이 파일은 스크립트 태그의 맨 위에서 가져옵니다

import 'storyblok-js-client/dist/index'

storyblok-nuxt의 node_modules 폴더로 이동하여 dist 디렉터리를 보고

변경 내용 테스트

$storybridge.on() 함수에서 우리는 하나의 사건을 검출했다. 예를 들어 input, published 또는change 그 다음에 상응하는 처리 조작

입력

모든 형식input을 감지했을 때, 프로젝트 내용의 이벤트 ID가 Storyblok에서 변경한 내용의 이벤트 ID와 일치하는지 테스트하고 있습니다.만약 이것이 사실이라면 이 두 내용은 일치한다

if (event.story.id === story.value.id) {
   story.value.content = event.story.content
}

변경 또는 게시

변경 사항이 저장되거나 게시될 경우 수동으로 새로 고치고 뷰를 최신 버전으로 업데이트하기 위해 다시 로드해야 합니다

app.$nuxt.$router.go({
   path: app.$nuxt.$router.currentRoute,
   force: true
})

결론

이렇게!이 코드를 작성하는 유형, 특히 currentRoute 사건에 대해서는 좀 골치 아프다.새로운 조합 API 접근StoryblokEventPayloadref의 값을 사용할 때, 우리는 getter와 함께 즐겁게 놀았다

하지만, 이 코드는 현재 유사한 곤경에 처한 모든 사람들에게 도움을 주고 시간을 절약할 수 있습니다

Storyblock은 소형과 대형 프로젝트에 많은 강력한 기능을 가지고 있다.나는 아래에 몇 가지를 열거하였는데, 만약 네가 할 수 있다면, 나는 정중히 네가 가서 보라고 건의한다.그들은 지금 아주 좋은 일을 하고 있다

멋진 Storyblock 기능

• Live Editor
• 
  Image Service(이들의 이미지 API를 통해 3.5MB의 이미지가 25KB의 작은 이미지로 내 응용 프로그램에 전달되고 자동으로 캐시되어 페이지의 불러오는 속도를 크게 높였다.)
• 많은 프레임워크 지원
• 그들은 VueJS의 거대한 지지자
• 
  Custom plugins(자신의 규범에 따라 Blok 필드를 사용자 정의할 수 있습니다. 사용자 정의 구축 드롭다운 메뉴에 API에서 얻을 수 있는 옵션이 채워져 있다고 상상해 보십시오.)

도움이 된다면 댓글이나 트위터로 연락 주세요.나는 네가 Storyblok으로 무엇을 만들었는지 보고 싶다. 특히 이 코드가 너에게 유용하다면