Composition API 사용하기

• setup()이라는 hook 안에 코드를 작성한다. *setup() {} 내에 작성하는건 created() hook 안에 작성하는 것과 비슷함
• ref()라는 함수를 import해와서 ref() 안에 데이터를 저장한다.
• 모든 데이터를 ref()로 감사야 실시간 재렌더링이 가능하다.

import { ref } from 'vue'

export default {
  name : '컴포넌트이름',
  setup(){
    let 변수 = ref();
    
    return { 변수 }
  },
}

<template>
	<div>{{ 데이터이름 }}</div>
</template>

 

• composition API안에서 Ajax 요청 또는 데이터를 변경하려면

데이터.value = 값;

 

Composition API에서 props 사용하는 방법

• setup() 함수 안에 파라미터를 두 개까지 집어넣을 수 있는데,
• 첫째는 자동으로 props가 되고 둘째는 context가 된다. (둘째는 잘 안씀)
• ref안에 꼭 담아 써야한다. 그렇지 않으면 props가 바뀌어도 실시간 반영이 되지않음.

import { ref, toRefs } from 'vue'

export default {
  setup(props){
    let 변수 = ref([]);
    let { 받아온 프롭스명 } = toRefs(props)  
    
    //첫번째 파라미터를 출력해보면 props가 다 담겨있다.
    console.log(받아온 프롭스명.value)
    
    return { 변수 }
  },
}

 

Composition API에서 methods 사용하는 방법

• 아무데나 함수 만들면 그게 메소드이다. 그리고 그걸 return하면 위에 html에서도 사용가능하다.

import { ref } from 'vue'

export default {
  setup(props){
    let 변수 = ref([]);
    
    function hello(){
    
    }
    return { 변수, hello }
  },
}

Composition API에서 Vuex store 사용하는 방법

•  setup 함수에서 $store.state.데이터를 어떻게 쓰냐면
• useStroe를 vuex에서 import 후 useStore()라고 작성하면 된다. 자유롭게 state를 출력 또는 commit, dispatch 사용한다. 참고로 mapState는 setup안에서 사용불가능하다.

import { useStroe } from "vuex";

let store = useStore();
console.log(store.state.데이터);
console.log(store.commit())