Next App을 초기화하기 전에 창 너비를 가져오고 저장하는 방법은 무엇입니까?

Next App을 초기화하기 전에 창 너비를 가져오고 저장하는 방법은 무엇입니까?

창 너비에 따라 다른 구성 요소를 렌더링해야 하는 다음 앱을 개발 중입니다.또한 헤더 매개 변수 중 하나가 장치 너비인 세션을 생성하라는 요청을 보냅니다.이를 위한 저의 접근 방식은 다음과 같습니다.

내 스토어의 코드:

//index.js
export const state = () => ({
  device_width: null,
  session_data : {},
 
})

export const mutations = {
  set_device_width(state, payload) {
    return state.device_width = payload;
  },
  set_session_data(state, payload){
     return state.session_data = payload
  }
}
export const actions = {

  //server init action to initialize the app with some necessary data
  async nuxtServerInit({ commit }) {

    
    if (process.browser) {
      commit('set_device_width', window.innerWidth);
    }
      var device_type = "";
      if (this.state.device_width < 768) {
        device_type = "mobile";
      } else if (this.state.device_width > 768) {
        device_type = "desktop";
      }
      var sessionData= await axios(...//api request with 'device_type' in header//....)
      commit('set_session_data', sessionData)

}

그런 다음 템플릿에서 값을 얻기 위해 계산된 방법을 사용하고 있습니다.

computed:{
  isMobile(){
    return this.$store.state.device_width<768
  }
}

화면 크기를 768 이하로 유지하면 제대로 작동합니다.그러나 데스크톱 모드의 경우 전체 화면이 몇 초 동안은 항상 Mobile==true 상태로 시작됩니다.그러면 isMobile이 false가 되고 데스크톱 구성 요소가 자동으로 로드됩니다.하지만 그 몇 초 동안 저는 모바일 UI를 볼 수 있고, 주로 제 세션 데이터는 항상 "device_type: mobile"로 만들어집니다.또한 처음에는 모바일 UI로 페이지가 시작되기 때문에 데스크톱 UI의 SEO 요소가 작동하지 않습니다.어떻게 해결해야 하나요?앱 초기화 전에 화면 크기를 결정해서 저장하면 됩니다.저는 serverInitaction이 그렇게 하는 방법이라고 생각했습니다.

서버 측에서 장치 정보를 가져올 수 없습니다. nextServerInit는 서버 측에서 실행되며 사용자 장치에 대한 단서가 없으므로 창 개체를 사용할 수 없습니다.

다른 방법으로는 마운트되거나 생성된 레이아웃 주기에서 장치의 너비를 가져와 상점에 커밋하는 것이 있습니다. 그러나 이러한 작업은 앱을 초기화한 후에 수행됩니다.

토니가 말했듯이, 그것은 가장 큰 부분을 위한 CSS 솔루션에 가까워야 합니다.

그래도 장치를 어딘가에 두고 싶다면 페비드 솔루션을 사용하면 됩니다. 여기 좀 더 시각적으로 만들 수 있는 코드가 있습니다.

/layouts/LayoutDefault.vue

<script>
import { throttle } from 'lodash-es'

const watchResize = throttle(function () {
  console.log('resized properly')
  // here you should mutate your `device_type` via a Vuex mutation/action
  // and make your axios call by preferably fetching either a const/let variable
  // or a global vuex state
}, 1000)

export default {
  mounted() {
    window.addEventListener('resize', watchResize)
  },
}
</script>

를 사용하는 것이 좋습니다.throttle그것을 설치합니다.yarn add -D lodash-es크기 조정을 감시하는 것은 감시가 심하고 여러 번 트리거되어 UI가 느려질 수 있기 때문입니다.

---

PS: 미들웨어에서는 이 기능을 사용하지 마십시오. 그렇지 않으면 eventListener가 각 경로 탐색에 연결됩니다.
여러 레이아웃을 사용하는 경우에는 Watcher를 마운트 해제하는 것이 좋습니다.beforeDestroy()낚싯바늘

Nuxt의 라이프사이클에 대한 자세한 내용은 다음 페이지를 확인하십시오. https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle/ #server
여기서, 당신은 그것을 볼 수 있습니다.nuxtServerInit서버 측만 해당되므로 이 이름을 사용할 수 있습니다.

---

편집: 이 모듈은 사용 사례에 적합합니다. https://github.com/nuxt-community/device-module

언급URL : https://stackoverflow.com/questions/67953808/how-to-get-and-store-the-window-width-before-initializing-my-nuxt-app