我一直在尝试找出如何在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存储的方法?非常感谢。
答案 0 :(得分:0)
我认为您应该能够创建仅客户端插件来处理该问题:
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 }
]
}
我还没有尝试过,但是我认为这是最好的选择。