Change Vue Prototype Variable In All Components


Answer :

To have $color globally available, you can use a Mixin, more specifically a Global Mixin.

If you would only want it to be read-only, it is simplest solution (less code). See snippet:

Vue.mixin({   created: function () {     this.$color = 'green';   } })  new Vue({   el: '#app1',   data: {     message: 'Hello Vue.js!'   },   mounted() {     console.log('$color #app1:', this.$color);   } })  new Vue({   el: '#app2',   data: {     message: 'Hello Vue.js!'   },   mounted() {     console.log('$color #app2:', this.$color);   } })
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>  <div id="app1">   <p>app1: {{ message }}</p> </div>  <div id="app2">   <p>app2: {{ message }}</p> </div>

Making $color reactive

To mave Vue react everywhere to changes to $color, you could use a Vuex store (see other answer).

But if you don't want to use Vuex just for that, another possibility is to create a Vue instance just to hold the "shared" data. After that, create a mixin with a computed property that references the $data of this "shared" Vue instance. See demo below.

// not using a Vuex store, but a separated Vue instance to hold the data // only use this if you REALLY don't want to use Vuex, because Vuex is preferrable let globalData = new Vue({   data: { $color: 'green' } }); Vue.mixin({   computed: {     $color: {       get: function () { return globalData.$data.$color },       set: function (newColor) { globalData.$data.$color = newColor; }     }   } })  // this.$color will be available in all Vue instances... new Vue({   el: '#app1' }) new Vue({   el: '#app2' }) // ...and components Vue.component('my-comp', {template: '#t3'}); new Vue({   el: '#app3', })
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>  <div id="app1">Color: {{ $color }} <button @click="$color = 'red'">change to red</button></div> <div id="app2">Color: {{ $color }} <button @click="$color = 'yellow'">change to yellow</button></div>  <template id="t3">   <div>Color: {{ $color }} <button @click="$color = 'purple'">change to purple</button></div> </template> <div id="app3"><my-comp></my-comp></div>

For completeness, check below to see how using Vuex and Mixin would be (more details on how to use Vuex in the other answer).

// Using a Vuex to hold the "shared" data // The store is not added to any instance, it is just referenced directly in the mixin const store = new Vuex.Store({   state: { $color: 'green' },   mutations: { update$color: function(state, newColor) { state.$color = newColor; } } }); Vue.mixin({   computed: {     $color: {       get: function() { return store.state.$color },       set: function(newColor) { return store.commit('update$color', newColor); }     }   } })   // this.$color will be available in all Vue instances... new Vue({   el: '#app1' }) new Vue({   el: '#app2' }) // ...and components Vue.component('my-comp', {template: '#t3'}); new Vue({   el: '#app3', })
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>  <div id="app1">Color: {{ $color }} <button @click="$color = 'red'">change to red</button></div> <div id="app2">Color: {{ $color }} <button @click="$color = 'yellow'">change to yellow</button></div>  <template id="t3">   <div>Color: {{ $color }} <button @click="$color = 'purple'">change to purple</button></div> </template> <div id="app3"><my-comp></my-comp></div>


If you want a reactive global variable, Mixins may not be a good idea. Because even if you are using global Mixins, Vue actually import and inject this Mixin whenever mount new components, which means every time a new variable $color created.

I believe the mutable data types (Object or Array) combined with Vue.prototype can do the trick: In your main.js file:

Vue.prototype.$color = {value: "black"};

In your *.vue file:

this.$color.value = "red"

In another *.vue file:

console.log(this.$color.value); // "red"

Since you probably want $color to be a property that is not just available, but reactive (and the same) across all components, a possible solution is to use a quick/small Vuex store.

There's a runnable example below. In it you'll see three different Vue instances that will react to the same $color variable (that is at the Vuex store).

All three examples are functionally identical. I wrote them differently just to portrait different ways of using the API. Use what seems more intuitive for you.

const store = new Vuex.Store({   state: {     $color: 'green'   },   mutations: {     update$color: function(state, newColor) { state.$color = newColor; }   } });  new Vue({   store: store, // add this so the store is available   el: '#app1',   // explicitly via this.$store   computed: {     $color: function() { return this.$store.state.$color }   },   methods: {     update$color: function(newColor) { return this.$store.commit('update$color', newColor); }   } }) new Vue({   store, // shorthand for store: store   el: '#app2',   // using helpers mapState and mapMutations   computed: {     ...Vuex.mapState(['$color'])   },   methods: {     ...Vuex.mapMutations(['update$color'])   }, }) new Vue({   store,   el: '#app3',   // using computed properties, only   computed: {     $color: {       get: Vuex.mapState(['$color']).$color,       set: Vuex.mapMutations(['update$color']).update$color     }   }, })
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuex"></script>  <div id="app1">   Color: {{ $color }} <button @click="update$color('blue')">change to blue</button> (explicitly via this.$store) </div> <div id="app2">   Color: {{ $color }} <button @click="update$color('red')">change to red</button> (using helpers mapState and mapMutations) </div> <div id="app3">   Color: {{ $color }} <button @click="$color = 'orange'">change to orange</button> (using computed properties, only) </div>


Comments

Post a Comment

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Answer : Solution 1: As Tan Yong Boon stated, it is Bent’s Rule with which we can explain the lower bond angle of \ce N F 3 \ce{NF3} \ce NF 3 when compared to \ce N H 3 \ce{NH3} \ce N H 3 . The rule as stated by Henry Bent: Atomic s character concentrates in orbitals directed towards electropositive substituents. Fluorine is more electronegative that hydrogen, and the \ce N − F \ce{N−F} \ce N − F bond would have greater p character than the \ce N − H \ce{N−H} \ce N − H bond. And more s character leads to large bond angles. Thus, the bond angle is greater in \ce N H 3 \ce{NH3} \ce N H 3 than in \ce N F 3 \ce{NF3} \ce NF 3 . Now, consider \ce N C l 3 \ce{NCl3} \ce NCl 3 . Clearly, \ce C l \ce{Cl} \ce Cl atom islarger in size than the central atom, nitrogen. Hence the higher bond angle here is due to the steric crowding caused by \ce C l \ce{Cl} \ce Cl atoms.(More pronounced than the electrongativity of \ce C l \ce{Cl} \ce Cl atom). They repel eachother and hence b...
Read more

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Answer : VACUUM is only needed on updated or deleted rows in non-temporary tables. Obviously you're doing lots of INSERTs but it's not obvious from the description that you're also doing lots of UPDATEs or DELETEs. These operations can be tracked with the pg_stat_all_tables view, specifically the n_tup_upd and n_tup_del columns. Also, even more to the point, there is a n_dead_tup column that tells, per table, how much rows need to be vacuumed. (see Monitoring statistics in the doc for functions and views related to statistics gathering). A possible strategy in your case would be to suppress the scheduled VACUUM, keeping an eye on this view and checking on which tables the n_dead_tup is going up significantly. Then apply the aggressive VACUUM to these tables only. This will be a win if there are large tables whose rows never get deleted nor updated and the aggressive VACUUM is really necessary only on smaller tables. But keep running the ANALYZE for the optimiz...
Read more

Change The Font Size Of Visual Studio Solution Explorer

Answer : Go to Tools->Options->Environment->Fonts and Colors In "Show Settings for" chose "Environment Font" In "Font" replace Automatic to for example, Arial and change size. Change the font size of that setting, all Font size in the Explorers (Solution Explorer, Server Explorer and Toolbox) and menus will change. You can set that in Tools, Options.
Read more