Question

我想知道如何处理用户的登录/注销，所以我这样做了：

store.commit('load_state');
store.subscribe((mutations, state) => {
  ApplicationSettings.setString('store', JSON.stringify(state));
});

new Vue({
  store,
  render: h => h('frame', [h(store.state.is_logged_in ? App : Login)]),
  created() {
    this.$store.commit('setNav', this.$navigateTo);
    if (this.$store.state.is_logged_in) {
      this.$store.dispatch('init');
    }
  },
}).$start();

请注意，loadstate最初从applicationsettings加载状态。但是此解决方案的问题是Login.vue的子组件中没有this。$ store 正确的方法是什么？

请注意，我不在这里使用vue-router。

Answer 1

我在这个问题上苦苦挣扎了两天，直到最终找到解决方案。

我的问题是因为我在使用$navigateTo时没有指定框架，所以我正在导航整个组件。我发现商店仅绑定到传递给main.js中的render函数的第一个组件

这是我的main.js的外观：

new Vue({
  store,
  render: h => h('frame', [h(store.state.is_logged_in ? Main : Login)]),
  created() {
    this.$store.commit('setNav', this.$navigateTo);
    if (this.$store.state.is_logged_in) {
      this.$store.dispatch('init');
    }
  },
}).$start();

我发现，如果is_logged_in为真this.$store或mapActions等仅在Main中起作用，它是子组件，否则它将仅在Login中起作用，并且是子组件组件。然后我正在阅读This，并在示例的store代码中看到以下代码：

import Vue from 'nativescript-vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({...});
Vue.prototype.$store = store;
module.exports = store;

因此，我在自己的商店定义中添加了行Vue.prototype.$store = store;，终于解决了我的问题。这确实给了我这么难的时间。希望我可以救人。

如何在nativescript vue中管理用户的登录状态？

1 个答案: