30天挑戰：「Vue與viewport size」技術記錄

總結

記錄如何在 Vue project 取得視窗尺寸，進而調整元素的顯示狀態

筆記

• 安裝vuex，建立windowWidth.js模組，設定state保存windowWidth資訊
• 在views中透過mapActions與mapGetters引用getter與actions；於created階段對window掛載resize監聽器，觸發時呼叫setWidth()
• 在<template>中透過getWindowWidth來取得視窗大小，進而控制 components 的顯示狀態

參考文件

• How to get the browser viewport dimensions?
• How can I use window size in Vue? (How do I detect the soft keyboard?)
• Set reactive screen width with vuejs