Question

我正在尝试使用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'

更新：问题仍然没有解决，但是作为解决方法，我只是将所有mixin数据移至$ root实例，并且该实例可以正常工作。

Answer 1

我建议您使用vuex进行更好的状态管理。将mixins用作vue应用程序的数据存储很复杂。使用vuex是在整个应用程序中处理动态或静态数据的便捷方法，并且在退出组件时不会在destroy hook中删除。

Vue路由器重置全局数据

1 个答案: