birdietorerik's avatar

Global variable vue.js

Hi!

Have created a global variable in vue.js -> $corceID

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

window.Vue = require('vue')
window.moment.updateLocale('en', { week: { dow: 1 } })

Vue.config.productionTip = false
Vue.prototype.$jquery = $
Vue.prototype.$corceID = 4

console.log("KALLER OPP APP.JS");

import VueChatScroll from 'vue-chat-scroll';

Vue.use(VueChatScroll);

import App from './App.vue'
import VueGeolocation from 'vue-browser-geolocation'
import * as VueGoogleMaps from 'vue2-google-maps'


// Core
import router from './routes/routes'
import store from './store/store'
import i18n from './i18n'


// Plugins

import GlobalComponents from './globalComponents'
import GlobalDirectives from './globalDirectives'
import GlobalMixins from './mixins/global'
import { mapGetters, mapActions } from 'vuex'



Vue.use(GlobalComponents)
Vue.use(GlobalDirectives)
Vue.use(GlobalMixins)
Vue.use(VueGeolocation)
Vue.config.productionTip = false

Vue.use(VueGoogleMaps,
  {
    load: {
       key: 'AIzaSyASILpMOGddd_ggGGGGgb_o9sDvOB2lX8',
       libraries: "places" // necessary for places input 
       
    }
    
    
})

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  i18n,
  created() {
    this.fetchLanguages()
  },
  methods: {
    ...mapActions('I18NStore', ['fetchLanguages'])
  }
})

I am using this global variable in my component

$corceID is set to 4 when vue file is loaded.

The problem is that app.js is executed again when refresh page.

How can i set Vue.prototype.$corceID only on startup (after login) NOT when i refresh JS ?

0 likes
2 replies
panthablack's avatar
Level 30

@birdietorerik - If you want to persist data across page loads (e.g., maintain an ID of some kind), you can use local storage or cookies (js-cookie makes this pretty straightforward).

If you are using Vuex, then vuex-persist is an option, or you could just use local storage directly.

If you are setting the global variable in the entry point file, you will probably have to reset this to the value you have stored as you are currently overwriting it with this hardcoded value every page load.

Please or to participate in this conversation.