Vue Router Resets Global Data

Question

Im trying to store user data globally using a Vue mixin: (main.js)

import Vue from 'vue';
import Resource from 'vue-resource'
import App from 'App';
import router from 'router/index';

Vue.use(Resource);

Vue.mixin({ //globals
  delimiters: ["[[", "]]"],
  http: {
    root: 'http://127.0.0.1:5000/'
  },
  data: function() {
    return {
      user: {
        authorized: false,
        username: '',
        password: '',
        avatar: '',
        entry: '',
        skill: '',
        arena: {
          id: '',
          start: false,
          votes: '',
        }
      }
    }
  }
});

new Vue({
  router: router,
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
});

I get the data from a login page just fine: (part of Login.vue)

    import Vue from 'vue';

    export default {
      name: 'Login-Page',
      data() {
        return {
          message: 'Hello Vue!'
        }
      },
      methods: {
        _make_basic_auth(user, pass) {
          var tok = user + ':' + pass;
          return "Basic " + btoa(tok);
        },
        _fetch_user(protocol) {
          this.message = 'waiting...';
          var auth = this._make_basic_auth(this.user.username, this.user.password);
          Vue.http.headers.common['Authorization'] = auth;
          this.$http[protocol]('api/u/' + this.user.username).then(response => {
            this.message = "Success";
            if (response.body.authorized) {
              this.user = {...this.user, ...response.body};
              setTimeout(() => {
                this.$router.push({
                  name: 'Profile',
                  params: {
                    id: this.user.username
                  }
                });
              }, 1000);
            }
          }, response => {
            this.message = response.body;
            console.log(response.status + "  " + response.body);
          });
        },
        register() {
          this._fetch_user('post');
        },
        login() {
          this._fetch_user('get');
        }
      }
    }

The data is just reset on redirect: (part of Main.vue)

import Profile from 'components/Profile'

export default {
  name: "Main-Page",
  methods: {
    enterArena() {
      this.$http.get('api/match').then(response => { 
          console.log(response.body);
          this.user.arena = {...response.body, ...this.user.arena};
          this.$router.push({
            name: "Arena",
            params: {'id': response.body.id}
          });
        }, error => {
          console.log(error.status + "  " + error.body);
        });
    }
  },
  created() {
    console.log(this);
    console.log(this.user);
    if (!this.user.authorized)
      this.$router.push({
        name: "Login"
      });
  }

}

It was working before, here is my old repo https://github.com/Jugbot/Painter-Arena-Web-API/tree/6f3cd244ac17b54474c69bcf8339b5c9a2e28b45 I suspect that the error is from my new arrangement of components in my Router or flubbed this references.

index.js:

routes: [
    {
      path: '',
      name: 'Main',
      component: Main,
      children: [
        {
          path: '/arena/:id',
          name: 'Arena',
          component: Arena
        },
        {
          path: '/u/:id',
          name: 'Profile',
          component: Profile
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/404',
      component: NotFound
    },
    {
      path: '*',
      redirect: '/404'
    },
  ],
  mode: 'hash'

Update: Problem is still unsolved but as a workaround I just moved all mixin data to the $root instance and that managed to work.

Answer 1

I recommend you to use vuex for better state management. It is complicated to use mixins as a data storage for a vue application. Using vuex is convenient way to manipulate dynamic or static data across the application and will not be deleted in destroy hook upon exiting on a component.