일반적인 Vue 문제 — 네임스페이스 Vuex 작업, 바이너리 다운로드 등

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue.js를 사용하면 프런트 엔드 앱을 쉽게 개발할 수 있습니다. 그러나 여전히 문제가 발생할 가능성이 있습니다.

이 기사에서는 몇 가지 일반적인 문제를 살펴보고 해결 방법을 알아보겠습니다.

2개의 네임스페이스 Vuex 작업 간 작업 전달

2개 이상의 네임스페이스 Vuex 작업이 있는 경우:
game.js

const actions = {
  myAction({dispatch}) {
    ...
    dispatch('notification/triggerSelfDismissingNotifcation', {...})
  }
}

notification.js

const actions = {
  dismiss(context, payload) {
    ...
  }
}

작업 이름 앞에 네임스페이스를 추가하여 이를 전달할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

dispatch('notification/dismiss', {...}, { root: true })

첫 번째 인수는 그 앞에 네임스페이스 이름이 있는 작업의 이름입니다.

두 번째 인수에는 평소와 같이 페이로드가 있습니다.

세 번째 인수의 root 속성은 네임스페이스 작업에 액세스하는 데 사용됩니다.

액션이 없으면 찾을 수 없습니다.

또한 Vuex 스토어 모듈에서 namespaced를 true로 설정하는 것을 기억해야 합니다.

URL에서 쿼리 매개변수 가져오기

this.$route.query 속성이 있는 URL에서 쿼리 매개변수를 가져올 수 있습니다.

예를 들어 다음이 있는 경우:

/url?foo=bar

URL에서 foo 를 작성하여 키this.$route.query.foo가 있는 쿼리 매개변수를 가져올 수 있습니다.

Vue 라우터 라우터 링크 활성 스타일

router-link-active 클래스 또는 router-link-exact-active 클래스에 스타일을 추가하여 활성 링크에 강조 표시와 같은 일부 스타일을 추가할 수 있습니다.
router-link-active는 대상 경로가 일치할 때 적용됩니다.
router-link-exct-active는 경로와 정확히 일치하는 항목이 발견되면 일치합니다.

스타일을 지정하려면 다음과 같이 작성할 수 있습니다.

.router-link-active,
.router-link-exact-active {
  background-color: green;
  cursor: pointer;
}

그런 다음 활성 상태인 router-link에 대한 녹색 배경을 얻습니다.

클래스 이름은 변경할 수 있습니다.

이를 위해 linkActiveClass 및 linkExactActiveClass 속성을 설정할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

활성 클래스를 router-link-active 및 router-link-exact-active에서 active 및 exact-active로 각각 변경합니다.

Vuex를 사용하여 작업에 여러 매개변수 전달

Vuex 작업은 state 및 pyaload 매개변수를 허용합니다.

따라서 둘 이상의 데이터를 전달해야 하는 경우 commit의 두 번째 인수에 개체를 전달할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

store.commit('authenticate', {
  token,
  expiration,
});

두 번째 인수에 token 및 expiration 속성이 있는 개체가 있습니다.

그런 다음 authenticate 돌연변이를 정의하기 위해 다음과 같이 작성할 수 있습니다.

mutations: {
  authenticate(state, { token, expiration }) {
    localStorage.setItem('token', token);
    localStorage.setItem('expiration', expiration);
  }
}

두 번째 매개변수인 payload 매개변수에서 속성을 가져옵니다.

그런 다음 로컬 저장소에 값을 저장하는 것과 같이 원하는 작업을 수행할 수 있습니다.

Axios로 Blob 데이터 저장

새Blob 인스턴스를 생성하여 Axios로 blob 데이터를 저장할 수 있습니다.

그런 다음 window.URL.ceateObjectURL를 호출할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

axios
  .get(`url/with/pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
     const blob = new Blob([response.data], { type: 'application/pdf' }),
     const url = window.URL.createObjectURL(blob);
     window.open(url);
  })

Axios에 바이너리 파일을 다운로드 중임을 알리기 위해 responseType를 'arraybuffer'로 설정했습니다.

그런 다음 첫 번째 인수의 배열에 이진 데이터가 있는 Blob를 사용하여 response.data 인스턴스를 만듭니다.

두 번째 인수는 파일 MIME 유형을 'application/pdf'  로 설정합니다.

그런 다음 window.URL.createObjectURL 를 사용하여 파일을 다운로드할 수 있는 URL을 생성합니다.

마지막으로 window.open를 호출하고 URL을 반환하여 사용자의 컴퓨터에 파일을 다운로드합니다.

각 배포 후 캐시 지우기

몇 가지 방법으로 Vue 앱을 배포한 후 캐시를 지울 수 있습니다.

한 가지 방법은 webpack-assets-manifest를 사용하여 정적 파일의 파일 이름에 임의의 해시 이름을 추가하는 것입니다.

또한 CDN의 버전이 지정된 폴더에 업로드할 수 있습니다.
no-cache 헤더는 IE를 제외한 대부분의 브라우저에서도 작동하므로 캐싱을 비활성화하도록 설정할 수 있습니다.

결론

정적 파일에 해시를 추가하기 위해 webpack-assets-manifest와 같은 일부 패키지로 캐시를 지울 수 있습니다.

Vuex 작업은 네임스페이스를 가질 수 있으므로 이를 네임스페이스로 분리할 수 있습니다.

Vuex 돌연변이의 페이로드는 두 번째 인수이므로 데이터의 한 조각을 전달하려는 경우 값을 전달하고 더 많은 것을 전달하려는 경우 객체를 전달할 수 있습니다.