Platform 2 and ¾ at Vue

Vue 2.7

2.7버전은 2버전의 마지막 마이너 버전이며, 3버전의 대표적 신기능인 composition api가 내장되어 있다. 2.7 미만 버전에서는 따로 @vue/composition-api 를 추가하면 쓸 수 있다. 2.7에서 해당 패키지를 설치하면 에러가 난다.

어차피 2버전은 2023년 12월 31일까지만 지원되기 때문에 2.7버전의 독특한 사용법은 별로 중요하지 않지만, 누군가에게는 중요할 수도 있을 것 같다.

도움이 되었던 글
https://stackoverflow.com/questions/74117049/vue-2-7-with-composition-api-vuex
https://stackoverflow.com/questions/66013172/vue2-composition-api-dynamic-template-refs

뷰 2.7의 미묘한 해결책과 눈물나는 삽질..

composition api를 2버전에서 쓴다면

열심히 뷰 강의 듣고 있는데 2버전 기준으로 설명해주셔서 2버전 깔고 쭉 따라가던 중, 2버전에서 composition api를 사용해 볼까요 - 부터 문제가 생겼다.

강의는 2.6버전을 쓰고 나는 2.7 버전을 쓰고 있어서 그런 듯 했다. 강의에서는 @vue/composition-api를 추가로 깔고 진행했는데 2.7버전에는 내장되어 있고 깔면 오히려 에러나서 깔지 않고 그냥 진행했다.

처음에는 문제가 없었지만, store와 ref를 사용할 때 잘 안되기 시작했다.

vuex store 사용 방법

~ 2.6

setup에서 root를 꺼내서(?) 쓰면? 거기 다 있다.
vue2버전 방법 즉, option API에서는 모든 것이 this 였지만, composition API에서는 this와 빠이빠이다.

<script>
import naverLogin from '@/helper/naverLogin'
import { onMounted } from 'vue'

export default {
  name: 'LoginNaver',
  setup(props, { root ) {

    onMounted(() => {
      const naverInfo = root.$store.state.naverInfo
      naverLogin(true, true)

      naverInfo.getLoginStatus((status) => {
        if (status) {
          const { accessToken } = naverInfo.accessToken
          root.$store.commit('setAccessToken', accessToken)
        }
      })
    })
  },
}
</script>

2.7

참고 링크 Vue 2.7 With Composition API + Vuex

store 파일에서.. 아무튼 new Vuex로 store를 만든 곳에 가서 한 줄을 추가한다.
export const useStore = () => store

const store = new Vuex.Store({ ...options });
export default store;
export const useStore = () => store;

아까 store 파일에서 내보낸 거를 const store = useStore() 이렇게 불러와서 사용한다.
이전까지의 버전처럼 setup의 두 번째 인자에서 root를 꺼내어 쓰는 방법은 사용할 수 없다.

<script>
import naverLogin from "@/helper/naverLogin";
import { onMounted } from "vue";
import { useStore } from "@/store";

export default {
  name: "LoginNaver",
  setup() {
    const store = useStore();

    onMounted(() => {
      const naverInfo = store.state.naverInfo;
      naverLogin(true, true);

      naverInfo.getLoginStatus((status) => {
        if (status) {
          const { accessToken } = naverInfo.accessToken;
          store.commit("setAccessToken", accessToken);
        }
      });
    });
  },
};
</script>

router 사용 방법

router만 쓸때는 store랑 같은 방법으로 사용해도 된다.

2.6까지는 root에서 라우터 접근하면 된다. root.$router.push('/login')

2.7에서는 router 적어 놓은 파일에 가서 store랑 똑같이 export const useRouter = () => router하고 사용할 때도 const router = useRouter() 이렇게 불러와서 router.push('/') 이렇게 할 수 있다.

이렇게 순순히 해결되는 줄 알았나요?

route는 어떡해

route를 써야할 때가 왔는데 어떻게 해야할 지 몰라서 결국 vue-router를 버전업했다.

수정 전 버전
"vue-router": "^3.5.1"
수정 후 버전
"vue-router": "^3.6.5"

vue-router 3.6버전부터 useRouter와 useRoute 등을 가져와 쓸 수 있다고 한다.

import { useRoute, useRouter, useLink, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router/composables'

(참고 링크)
How to get current route in vue2.7 composition api
vue-router/CHANGELOG.md at dev · vuejs/vue-router

강의들을 때는

강의랑 버전을 맞춰서 해야겠다. 어쩔 수 없는 경우도 있지만 가능한 부분이라면 꼭.. 꼭 버전을 맞춰야 겠다. 보통은 그냥 최신 버전에 맞춰서 쓰다가 막히는 부분은 강의와 별도로 해결하고 계속하고 그랬다. 그동안은 만났던 건 그리 어려운 에러는 아니었나 보다.

지금 생각해 보건데, 2.6 이하 버전에서 2.7로 넘어가는 과정을 겪은, 그러니까 2.7을 썼었을 환경이라면 이미 3버전을 쓰고 있지 않을까? 그리고 composition api를 도입해서 사용할 정도면 이미 2버전은 안쓰고 있을 거 같다.