vuex 中全局共享登录状态

 <template>
 <div id="app">
     <counter></counter>
+    <div class="">
+      {{isLogin}}
+    </div>
     <p>
         <button @click="increment">+</button>
         <button @click="decrement">-</button>
+        <button @click="login">login</button>
     </p>
     <child :level="1">Hello world!</child>
     <child :level="3">Hello world!</child>
@@ -28,6 +32,9 @@ export default {
     computed: {
         count() {
             return store.state.count
+        },
+        isLogin() {
+          return store.state.isLogin
         }
     },
     methods: {
@@ -36,6 +43,9 @@ export default {
         },
         decrement() {
             store.commit('decrement')
+        },
+        login() {
+            store.commit('login')
         }
     },
     components: {

@@ -13,13 +13,13 @@ export default {
         //     // Yikes - duplicate VNodes!
         //     myParagraphVNode, myParagraphVNode
         // ])
-        return createElement('div',
-            Array.apply(null, {
-                length: 10
-            }).map(function() {
-                return createElement('p', 'hi')
-            })
-        )
+        // return createElement('div',
+        //     Array.apply(null, {
+        //         length: 10
+        //     }).map(function() {
+        //         return createElement('p', 'hi')
+        //     })
+        // )
     }
 }
 </script>

@@ -6,11 +6,14 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
     state: {
-        count: 0
+        count: 0,
+        size: 10,
+        isLogin: false
     },
     mutations: {
         increment: state => state.count++,
-        decrement: state => state.count--
+        decrement: state => state.count--,
+        login: state => state.isLogin = true
     }
 })