Vue Router сбрасывает глобальные данные - PullRequest
Новая
       6

Vue Router сбрасывает глобальные данные

0 голосов
/ 27 июня 2018

Я пытаюсь хранить пользовательские данные глобально, используя 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/>'
});

Я получаю данные со страницы входа в систему просто отлично: (часть 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');
        }
      }
    }

Данные просто сбрасываются при перенаправлении: (часть 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"
      });
  }

}

Раньше это работало, вот мой старый репо https://github.com/Jugbot/Painter-Arena-Web-API/tree/6f3cd244ac17b54474c69bcf8339b5c9a2e28b45 Я подозреваю, что ошибка произошла из-за моего нового расположения компонентов в моем маршрутизаторе или из-за этой ссылки.

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'

Обновление: Проблема все еще не решена, но в качестве обходного пути я просто переместил все данные миксина в экземпляр $ root, и это удалось.

1 Ответ

0 голосов
/ 29 июня 2018

Я рекомендую вам использовать vuex для лучшего управления состоянием. Сложно использовать миксины в качестве хранилища данных для приложения vue. Использование vuex - это удобный способ манипулирования динамическими или статическими данными в приложении, и он не будет удален в ловушке уничтожения при выходе из компонента.

...