DEV Community: Koichi Adachi

Data passing by props Object and function in OptionsAPI

Koichi Adachi — Sat, 06 Jun 2020 19:17:34 +0000

Definition callback function by PropOptions on Child Component

<template>
  <div>
    <h3>This is a OptionsAPI Component Callback Example</h3>
    <v-btn @click="increment">increment</v-btn>
  </div>
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator'
import { PropOptions } from 'vue'

export default Vue.extend({
  name: 'CallbackChild',
  props: {
    obj: {
      type: Object,
      required: true
    } as PropOptions<{ initialCount: number }>,
    onClickIncrementButtonListener: {
      type: Function,
      required: true
    } as PropOptions<(count: number) => {}>
  },
  data() {
    return { count: this.obj.initialCount }
  },
  methods: {
    increment() {
      this.count++
      this.onClickIncrementButtonListener(this.count)
    }
  }
})
</script>

<style scoped></style>

Call from parent component

passing callback method

<template>
  <div>
    <CallbackChild
      :on-click-increment-button-listener="onClick"
      :obj="{ initialCount: 100 }"
    ></CallbackChild>
    <p v-if="$data.count">{{ count }}</p>
  </div>
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator'
import CallbackChild from '~/components/options/CallbackChild.vue'

export default Vue.extend({
  name: 'CallbackParent',
  components: {
    CallbackChild
  },
  data() {
    return { count: 0 }
  },
  methods: {
    onClick(count: number) {
      this.count = count
    }
  }
})
</script>

<style scoped></style>

Experience in this week 20200514

Koichi Adachi — Thu, 14 May 2020 07:13:27 +0000

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>

Experience in this week 20200429

Koichi Adachi — Fri, 01 May 2020 02:56:03 +0000

Experience in this week

fetch() on Nuxt 2.12.x

treat 'this' object in fetch() at Nuxt 2.12.x
In this advantage, divide processing Statefull ViewModel or Data Access Layer to other .ts file.

sequence

$router.replace(newURL)
fetch()
updateListFromQuery()
repository.fetch()
update this.$data.list
-> refresh screen

@Component({
  watch: {
    '$route.query': '$fetch'
  }
})
export default class HogeListVueImpl extends Vue implements HogeListVue {
  public async fetch() {
    await this.updateListFromQuery()
  }

  private async updateListFromQuery() {
    this.$data.list = await this.repository.get(this.$route.query)
  }
}

export default class Header extends Vue {
  public async onClickChangeUserButton() {
    const url = this.createReplaceURL(this.$route.path, this.$route.query, this.$data.userIndex)
    this.$router.replace(url)
  }
}

@nuxtjs/proxy

changing to route implicitly.

.ex

BASE_URL=http://localhost:9001
PROXY_TARGET=http://localhost:9001
AXIOS_PREFIX=/api

  axios: {
    baseURL: process.env.BASE_URL,
    credentials: true,
    prefix: process.env.AXIOS_PREFIX,
    proxy: process.env.ENV === 'local'
  },
  proxy: {
    [<string>process.env.AXIOS_PREFIX]: {
      target: process.env.PROXY_TARGET,
      pathRewrite: { '^/api': '/' }
    }
  },

"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/proxy": "^1.3.3",

nuxt-proxy

async hoge(){
    await window.$nuxt.$axios
      .get('v1/login')
      .then((response) => {
}

change url
localhost:8000/v1/login
to
localhost:9001/api/v1/login

add 'api' by AXIOS_PREFIX
change to localhost:9001 by @nuxtjs/proxy

on Chrome inspector
localhost:9001/api/v1/login
->
localhost:8000/api/v1/login

Cant intersept other Proxy Software(ex.Charles)

iOS Build failed by CocoaPods

checkout other branch branch, frequently fail to build.
because cause mismatch libraries integration.

how to fix this issue, have to clear any caches and rebuild Pods

rm Podfile.lock

rm -rf Pods
rm -rf ~/.cocoapods
rm -rf xxxxxxxx.xcworkspace
pod cache clean --all
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf ~/Library/Caches/AppCode2019.3
rm -rf ~/Library/Caches/CocoaPods

iOS cant use REPL boundary Pods library and code

plugin 'cocoapods-binary'
all_binary!
pod 'IBAnimatable', binary: false

'cocoapods-binary' plugin serve prebuild libraries
want to use REPL for librarie's objects,
disable this plugin and build local machine.