Apprendre Vue.js 3 - Jour 4 : コンポジション API

Si vous desirez plus de contenu francophone comme celui-ci, cliquer Follow ou

La コンポジション API

Est une alternative à l'Option API et permet d'écrire notre code regroupé et plus naturellement, sans utiliser des propriétés/objects et sans utiliser le mot clé 'this.'.

メソッドのセットアップ()

Tout le code de votre component se retrouvera dans cette method

<template>
</template>

<script>
  export default {
    setup() {
       ..code du component..
    }
  }
</script>
<style>
</style>

À noter que la section template et style resteinchangé

Valeur de retour de la method setup()

必要な変数を使用してメソッドをセットアップ() し、テンプレートを使用して例を作成し、return() を使用してメソッドを返します.

<template>
  {{ title }}
</template>

<script>
  export default {
    setup() {
      let title = 'My Title'

      return {
        title,
      }
    }
  }
</script>

小道具

Vous pouvez accéder au props de votre component avec le paramètre props

<script>
  export default {
    props: ['title']
    setup(props) {
      console.log(props.title)

      return {

      }
    }
  }
</script>

変数リアクティブ

utiliser la ディレクティブ v-model sur une variable を注ぎます. vous devez rendre cette variable réactive avec la fonction ref()

<template>
  <input v-model="title">
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let title = ref('My Title')

      return {
        title,
      }
    }
  }
</script>

固有値 .value

pour モディファイア une variable reactive, déclaré avec ref(), vous devez utiliser sa propriété .value

<template>
  <input v-model="title">
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let title = ref('My Title')
      title.value  = 'Hello World'

      return {
        title,
      }
    }
  }
</script>

ディレクティブ ref pour lier un élément HTML

La ディレクティブ ref peut également être utilisé afin de créer un binding avec un élément html (en remplacement de this.$ref dans l'option API))

<input :ref="title" type="text" />

<script>
import { ref } from 'vue'

export default {
  setup() {
    import { ref } from 'vue'

    const title = ref(null)

     return {
       title,
     }
  }
</script>

反応的 : 参考文献の代替手段はありません

<template>
  <input v-model="state.title">
</template>

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const state = reactive({
        title: 'My Title'
      }

      state.title  = 'Hello World'

      return {
        person,
      }
    }
  }
</script>

À noter que la fonction reactive prend uniquement un object comme valeur (pas de string, number, etc.) et que contrairement à la fonction ref() vous ne devez pas utiliser la propriété .value pour retourner la valeur de la variable.

BeforeCreate と Created ライフサイクル フックの組み合わせ

コードの作成者を構成要素のシンプルなコードの場所に配置し、セットアップ() を実行する

<template>
  <input v-model="title">
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let title = ref('My Title')
      title.value  = 'Default value on creation'

      return {
        title,
      }
    }
  }
</script>

onMounted

Permet d'executer du code lors de la creation du component

<script>
export default {
  import { onMounted, ref } from 'vue'
  setup() {
    let products = ref(null)

    onMounted(async () => {
      const response = await fetch('https://fakestoreapi.com/products')
      products.value = await response.json() 
    })
}
</script>

放出する

La fonction emit remplace $emit

<template>
  <button @click="save">save</button>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup(props, { emit } ) {
      const id = 12
      const save = function() {
        emit('onCLickEvent', id)
      } 
      return {
        save,
      }
    }
  }
</script>

ストアでの利用 (Vuex)

La method this.$store n'étant pas disponible en mode composition API vous devez maitenant utiliser la method useStore()

<template>
  <input v-model="title">
  <button @click="saveTitle">save</button>
</template>

<script>
  import { ref } from 'vue'
  import { useStore ] from 'vuex'

  export default {
    setup() {
      let title = ref('My Title')
      const store = useStore()

      title.value  = store.state.title

      return {
        title,
        saveTitle: () => store.commit('save')
      }
    }
  }
</script>

saveTitle est en faite une function. Retourner une fonction permet de ne pas exécuter le commit tout de suite mais bien seulement lors de l'appel de saveTitle

計算方法の計算()

<script>
  import { ref, computed } from 'vue'
  import { useStore ] from 'vuex'

  export default {
    setup() {
      let title = ref('My Title')
      const store = useStore()

      title.value  = store.state.title

      return {
          title,
        count: computed(() => store.state.count)
      }
    }
  }
</script>

計算された変数の「count」は、「state.count」の変更によって計算されます.

メソッドウォッチ

Permet d'executer du code lors de la modified d'une variable

<script>
  import { ref, watch } from 'vue'
  import { useStore ] from 'vuex'

  export default {
    setup() {
      let title = ref('My Title')
      const store = useStore()

      watch(title, (new, old) => {
        console.log('The title have change')
      }

      return {
        title,
        count: computed(() => store.state.count)
      }
    }
  }
</script>

ふりがなを見ると豪華な人が変化し、一時的に一時的に使用されます watchEffect()

watchEffect(() => {
  console.log(count, title)
}

La fonction va s'exécuter à chaque modified de toutes les variables présente dans le watchEffect()

ルーターとルートの利用

en モード合成 API vous ne pouvez pas utiliser 'this.$router' et 'this.$route', vous devrez utiliser useRouter et useRoute

<script>
  import { useRouter, useRoute) from 'vue-router'

  export default {
    setup() {
      const router = useRouter()
      const route = useRoute()

      router.push({ name: 'Home' })

      console.log(route.path, route.params)

    }
  }
</script>

「スクリプト設定」

Il est possible d'utiliser la syntax abrégé pour créer le code de votre composition API

<script setup>
  import { ref, watch } from 'vue'
  import { useStore ] from 'vuex'

  let title = ref('My Title')
  const store = useStore()

  watch(title, (new, old) => {
    console.log('The title have change')
  }
</script>

注意: 'スクリプト セットアップ' 属性は、setup() メソッドのユーティリティとして使用され、プラス以外の値を返します. Ils sont géré automatiquement. Vue fait un return avec toutes les variables et fonctions definit dans le top level.

小道具とエミット avec 属性設定

<script setup">
  import{ defineProps, defineEmit, useContext } from 'vue'

  defineProps(['msg']);
  // or
  defineProps({
    title: String,
  })
  // or
  const props = defineProps({
    title: String,
  })
  // console.log(props.title)

  const emit = defineEmit(['handleClick'])
  const { slot, attrs } = useContext()
</script>

結論

Merci d'avoir lu cet 記事. Si vous desirez plus de contenu francophone comme celui-ci, cliquer Follow ou