Question

我一直在尝试找出如何在NuxtJS应用程序中附加window resize侦听器以确定屏幕宽度是建议移动屏幕还是PC屏幕。

我使用了几种布局，因此我想避免在每个布局中都定义侦听器。因此，我需要在其他地方创建。到目前为止，我已经尝试过

1）创建一个混入

const mixin {
  mounted() { ...code to determine mobile devices }
}

export default {
   install(Vue) {
     Vue.mixin(mixin);
   },
};

我已导出，然后使用Vue.use(handleResize)安装了mixin。我在nuxt.config.js中注册了此插件。但是，这使mixin在我拥有的每个组件中触发（不足为奇），而不仅仅是总计一次。

2）使用了延迟混音

根据IlyaSemenov 的建议，我使用他的方法注册了侦听器。

import extend from '@/utils/extend-vue-app';
import isMobile from '@/utils/isMobile';
import throttle from 'lodash.throttle'

function handleResizeUtil(app) {
  const mobile = isMobile();
  if (mobile !== app.store.state.utils.isMobile) {
    app.store.commit('utils/TOGGLE_IS_MOBILE', mobile);
  }
}

const handleWindowResize = throttle(function(app) {
  handleResizeUtil(app);
}, 250);

export default async function ({ app }) {
    extend(app, {
        mounted () {
         handleWindowResize(app);
         window.addEventListener('resize', () => handleWindowResize(app));
        },
    })
}

到目前为止，效果很好。我的问题是，创建一个应用程序范围的事件侦听器需要很多代码。

所以我的问题是，是否有人知道如何只注册一次窗口侦听器并可以访问vuex存储的方法？非常感谢。

Answer 1

我认为您应该能够创建仅客户端插件来处理该问题：

plugins / resize.js

export default ({ store }, inject) => {
    store.dispatch('WINDOW_SIZE_CHANGED')
    window.onresize = () => {
        store.dispatch('WINDOW_SIZE_CHANGED')
    }
}

您只需要在nuxt.config.js中注册它，并将其标记为ssr: false，就不会在服务器端触发插件：

nuxt.config.js

module.exports = {
  plugins: [
    { src: '~/plugins/resize', ssr: false }
  ]
}

我还没有尝试过，但是我认为这是最好的选择。

如何正确注册单个应用程序级窗口侦听器，以访问存储在Nuxt JS中的

1 个答案: