convert HEIC to jpg on macOS terminal
ls -a *.HEIC | xargs -I% magick convert % ./temp_jpeg/%.jpg
convert jpg to PDF on macOS terminal
convert *.jpg hoge.pdf
CompositionAPI Chain Reactive Function TypeScript
how to implement reactive data binding
step 1. make reactive object wrapped by UnwrapRef
function useLoginState(): UnwrapRef<Auth> {
const loginStateRef = reactive({
name: undefined,
state: AuthState.Logout
} as Auth)
return loginStateRef
}
reactive() wrap data object
step 2. update reactive object in async function
setInterval(() => {
let newLoginState = AuthState.Login
if (loginStateRef.state !== newLoginState) {
loginStateRef.state = newLoginState
}
}, 500)
update value through UnwrapRef object.
step 3. observe reactive object in html
{{ ghInfoRef.data.issues }}
<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="ghInfoRef.data.issues"
:search="search"
:loading="ghInfoRef.data.issues.length === 0"
item-key="title"
show-select
class="elevation-1"
>
</v-data-table>
</template>
<script lang="ts">
interface GHInfo {
data: {
issues: GHIssue[]
}
loading: boolean
errored: boolean
}
function useLoginState(): UnwrapRef<Auth> {
consolelog(`SeparateCompositionComponent.useLoginState()`)
const loginStateRef = reactive({
name: undefined,
state: AuthState.Logout
} as Auth)
// emulate async function
setInterval(() => {
let newLoginState = AuthState.Login
if (loginStateRef.state !== newLoginState) {
loginStateRef.state = newLoginState
}
}, 500)
return loginStateRef
}
function useGitHubAPI(loginStateRef: UnwrapRef<Auth>): UnwrapRef<GHInfo> {
consolelog(`loginStateRef.loginState:${loginStateRef.state}`)
const ghInfoRef = reactive({
data: { issues: [] },
loading: true,
errored: false
} as GHInfo)
watch(
() => loginStateRef.state,
async (current, prev) => {
consolelog(
'Watch loginStateRef.state function called with args:',
current,
prev
)
ghInfoRef.data = {
issues: filteredIssues
}
}
}
const GitHubIssuesCompositionComponent = defineComponent({
props: {
message: {
type: String,
default: 'default Value----------------------'
}
},
setup(props: Props, context: SetupContext) {
consolelog(`GitHubIssuesCompositionComponent.setup()`)
const loginStateRef = useLoginState()
const ghInfoRef = useGitHubAPI(loginStateRef)
return { ghInfoRef }
}
})
export default GitHubIssuesCompositionComponent
</script>
Top comments (0)