Question

当前，我正在将window.innerWidth值存储到名为screenWidth的vuex getter中，并在所有组件中使用它。但是问题是每次我要使用它时，我都必须1）import { mapGetters } from 'vuex' 2）在计算属性内调用...mapGetters()。为了解决这个问题，我认为原型注入可能是个好主意。所以我这样做了：

Vue.prototype.$screenWidth = window.innerWidth;
window.addEventListener('resize', () => {
    Vue.prototype.$screenWidth = window.innerWidth;
});

但这不起作用。如何更轻松地访问组件中的屏幕宽度，而无需进行所有导入/映射工作？

Answer 1

您对Vuex的使用方式对我来说听起来不错。

如果要在许多组件中使用此对象，则可能的替代方法是在原型上使用可观察对象，如以下示例所示。通过使用对象，我们可以保留反应性。

Vue.prototype.$screen = Vue.observable({
    width: window.innerWidth,
    height: window.innerHeight
});

window.addEventListener('resize', () => {
    Vue.prototype.$screen.width = window.innerWidth;
    Vue.prototype.$screen.height = window.innerHeight;
});

new Vue({
    el: '#app'
});

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <p>Width: {{ $screen.width }}</p>
  <p>Height: {{ $screen.height }}</p>
</div>

这依赖于Vue.observable，它需要Vue 2.6.0。在早期版本的Vue中，您可以通过创建临时Vue实例并将对象分配给该实例的数据来执行类似操作：

Vue.prototype.$screen = new Vue({
    data: {
        screen: {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }
}).screen;

window.addEventListener('resize', () => {
    Vue.prototype.$screen.width = window.innerWidth;
    Vue.prototype.$screen.height = window.innerHeight;
});

new Vue({
    el: '#app'
});

<script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></script>
<div id="app">
  <p>Width: {{ $screen.width }}</p>
  <p>Height: {{ $screen.height }}</p>
</div>

这看起来很恐怖，但这就是引入Vue.observable的原因。

请注意，SO将这些代码段包装在iframe中，因此，当您调整浏览器窗口的大小时，可能看不到数字更新。对我来说，我要么必须将窗口缩小到一个狭窄的范围，要么单击 Expand snippet 链接以查看其工作情况。

访问Vue组件中的屏幕宽度

1 个答案: