src/popup/App.vue

   1 <template>
   2   <section id="app">
   3     <transition-group name="panels" tag="div" class="app-wrapper">
   4       <Login class="view" key="login" v-show="view.login" @succ="loadAccounts"></Login>
   5       <Home ref="Home" class="view" key="home" v-show="view.home"></Home>
   6     </transition-group>
   7   </section>
   8 </template>
   9
  10 <script>
  11 import Home from "./framework/home";
  12 import Login from "./framework/login";
  13 import bytom from "./script/bytom";
  14
  15 export default {
  16   components: {
  17     Login,
  18     Home
  19   },
  20   data() {
  21     return {
  22       currView: "home"
  23     };
  24   },
  25   computed: {
  26     view() {
  27       const { currView } = this;
  28       return {
  29         login: currView === "login",
  30         home: currView === "home"
  31       };
  32     }
  33   },
  34   methods: {
  35     loadAccounts: function() {
  36       bytom.Account.list().then(accounts => {
  37         this.currView = accounts.length > 0 ? "home" : "login";
  38       });
  39     }
  40   },
  41   mounted() {
  42     this.loadAccounts();
  43   }
  44 };
  45 </script>