Vue.js seltsame Sache mit Fenstereigenschaft

Question

Wenn ich meine vue.js 2.0-Anwendung einstelle, mache ich window.User Objekt.

Das läuft alles gut. Dann in einigen Komponenten verwende ich es in meinen Vorlagen:

v-if="this.User.role == 2" 

So in irgendeiner Komponente dies funktioniert und in einigen nicht -_- (Cannot read property 'role' of undefined). Wie ist das überhaupt möglich? In der Komponente ist, wo dies nicht funktioniert, ich das versucht habe:

created() { 
    alert(window.User.role); 
} 

Und das richtige Ergebnis erscheint! Aber in der Vorlage funktioniert es nicht. Was könnte hier vorgehen? Sehr sehr frustrierende Sache.

In meinem bootstrap.js:

window.User = Laravel.user; 

ich alle meine Komponenten auf die gleiche Weise registrieren: in allen

Vue.component('corporations',   require('./components/corporation/Corporations.vue')); 

Answer 1

Wenn User ist wie eine globale Variable handeln, die Sie zugreifen möchten Komponenten und Sie möchten, dass es reaktiv ist, können Sie es zu den Stammdaten von Vue hinzufügen und es dann überall anders als this.$root.User beziehen.

Sie können auch ein Mixin verwenden, um eine computed zu deklarieren, die es für alle Komponenten verfügbar macht, die das Mixin verwenden. Wie folgt:

var mixin = { 
    computed: { 
     User: function() { return window.User; } 
    } 
} 

Das Mixin ist wahrscheinlich eine bessere Route zu gehen.