[Vue/코딩애플/part3] 13. Composition API 관련 사용법들 (style scoped, reactive(), toRefs(), watch, computed, vuex store, methods 함수)

📌 style scoped

vue 파일들에 있던 CSS 는 하나로 합쳐짐

<template>
  <!-- Composition API 실습 -->
  <div style="padding : 10px">
    <h4>팔로워</h4>
    <input placeholder="검색"/>
    <div v-for="(a,i) in follower" :key="i" class="post-header">
      <div :style="`background-image: url(${a.image})`" class="profile"></div>
      <span class="profile-name">{{ a.name }}</span>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import axios from "axios";

export default {
  name: 'MyPage',
  setup() {
    let follower = ref([]);

    onMounted(() => {
      axios.get('/follower.json').then((res) => {
        follower.value = res.data; // 데이터 담고 싶다면 변수명.value
      })
    })

    return {follower}
  }
}
</script>

<style>

</style>

 

전 포스팅에서 만들었던 MyPage.vue 에 css 가 없음에도 이쁘게 노출 됐던 것은 css 파일이 하나로 합쳐졌기 때문임

 

Post.vue 에 해당하는 css 가 있었다.

 

근데 특정 vue 파일에만 css 를 적용하고 싶다면?

<style scoped>

</style>

안에 css 를 작성하면 된다.

 

 

📌 ref() 와 비슷한 reactive()

데이터를 만들 때 두 가지 방법이 있다.

1. ref() - primitive 자료형 

2. reactive() - array, object 자료형 (reference data type)

 

reactive 에는 보통 array, object 를 집어 넣는다.

그 나머지 자료형은 ref 에 넣는다. (primitive 자료형)

 

기능적으로는 큰 차이는 없음

 

reactive 도 쓰려면 import 해와야 한다.

import {reactive} from "vue";

 

📌 toRefs() - 여러 개의 props 이용할 때 

MyPage.vue 파일에서 props를 사용해보자

부모 컴포넌트에서 1 이란 데이터를 props 를 보낸다.

 

props 로 받아온 one 이란 데이터를 쓰려면 setup 함수에 파라미터가 필요하다.

 

setup(props, context) {}

 

setup 의 첫번째 파라미터는 항상 props 이다.

두번째 파라미터에는 attrs, slots, emit 이런 것들이 담겨있다.

 

props 도 실시간 반영이 필요하기때문에 항상 ref() 로 감싸야 한다.

이 때 여러 개의 props 를 감쌀 때 toRefs(props) 를 이용한다.

마찬가지로 import 가 필요

import {toRefs} from "vue";

setup(props) {
	let {프롭스} = toRefs(props);
}

 

사용할 땐 프롭스.value

 

 

🔎 let {one, two} 같은 문법을 Destructuring 문법이라고 함

 

 

📌 watch 사용법

watch(감시할 데이터, ()=>{ 실행할 코드 })

// watch 사용하기
watch(one, () => {
   // one 데이터가 변경될 때마다 실행되는 코드
})

 

watch 도 import 필요! (보통 자동으로 import 해준다)

 

참고로 props 도 감시 가능

 

 

📌 computed 사용법

computed(()=> {return 연산결과})

// computed 사용하기
let num = computed(() => {
  return '3'
})

console.log('num >', num.value)

 

computed 도 데이터이름.value 로 해야 잘 출력된다.

 

📌 vuex store 사용법

import {useStore} from "vuex";

 

// vuex의 store 사용하기
let store = useStore();
console.log('store > ', store.state.데이터명)

 

 

let store = useStore(); 

이제 store 을 $store 과 비슷하게 사용할 수 있다.

store.commit() 등등

 

⚡ Composition API 에서 mapState 는 없다. (단점) Vuex5 이상이면 될 수도 있음 // 강의 기준으론 없었음

 

📌 methods 함수 사용하는 법

// 함수 사용하기
function doThis () {
  console.log('doThis 함수입니다');
}

return {doThis}

 

return 에 함수명 적어야 한다.