fix the login

2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue

@@ -9,28 +9,7 @@ import TheHeader from './components/nav/TheHeader.vue';
 export default {
   components: {
     TheHeader
-  },
-  data() {
-    return {
-      isLoggedIn: false,
-      cart: { items: [], total: 0, qty: 0 },
-    };
-  },
-  provide() {
-    return {
-      isLoggedIn: this.isLoggedIn,
-      login: this.login,
-      logout: this.logout,
-    };
-  },
-  methods: {
-    login() {
-      this.isLoggedIn = true;
-    },
-    logout() {
-      this.isLoggedIn = false;
-    },
-  },
+  }
 };
 </script>
 

2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue

@@ -12,24 +12,28 @@
           <router-link to="/cart">Cart</router-link>
           <base-badge mode="elegant">{{ quantity }}</base-badge>
         </li>
-        <li v-if="isLoggedIn">
+        <li v-if="isAuthenticated">
           <router-link to="/admin">Admin</router-link>
         </li>
       </ul>
     </nav>
     <div>
-      <button v-if="!isLoggedIn" @click="login">Login</button>
-      <button v-if="isLoggedIn" @click="logout">Logout</button>
+      <button v-if="!isAuthenticated" @click="login">Login</button>
+      <button v-if="isAuthenticated" @click="logout">Logout</button>
     </div>
   </header>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
 import { mapGetters } from 'vuex';
 export default {
-  inject: ['isLoggedIn', 'login', 'logout'],
   computed: {
-    ...mapGetters('cart', ['quantity'])
+    ...mapGetters('cart', ['quantity']),
+    ...mapGetters('auth', ['isAuthenticated'])
+  },
+  methods: {
+    ...mapActions('auth', ['login', 'logout'])
   }
 };
 </script>

2021-05-05_vuex-11-a-challenge-starting-code/src/store/index.js

@@ -1,10 +1,12 @@
 import { createStore } from 'vuex';
 
+import authModule from './modules/auth/index.js';
 import cartModule from './modules/cart/index.js';
 import productsModule from './modules/products/index.js';
 
 const store = createStore({
   modules: {
+    auth: authModule,
     cart: cartModule,
     products: productsModule
   },

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/actions.js

@@ -0,0 +1,8 @@
+export default {
+  logout(context) {
+    context.commit('logout');
+  },
+  login(context) {
+    context.commit('login');
+  }
+};

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/getters.js

@@ -0,0 +1,5 @@
+export default {
+  isAuthenticated(state) {
+    return state.isLoggedIn;
+  }
+};

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/index.js

@@ -0,0 +1,15 @@
+import authActions from './actions.js';
+import authGetters from './getters.js';
+import authMutations from './mutations.js';
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      isLoggedIn: false
+    };
+  },
+  actions: authActions,
+  getters: authGetters,
+  mutations: authMutations
+};

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/mutations.js

@@ -0,0 +1,8 @@
+export default {
+  login(state) {
+    state.isLoggedIn = true;
+  },
+  logout(state) {
+    state.isLoggedIn = false;
+  }
+};