lesson 217: vuex more states simple login

2021-05-04_vuex-01-starting-setup/src/App.vue

@@ -1,30 +1,40 @@
 <template>
-  <base-container title="Vuex">
+  <base-container title="Vuex" v-if="userIsAuthenticated">
     <the-counter></the-counter>
     <favorite-value></favorite-value>
     <change-counter></change-counter>
     <button @click="increaseCounter">Add 10</button>
   </base-container>
+  <base-container>
+    <user-auth></user-auth>
+  </base-container>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 import BaseContainer from './components/BaseContainer.vue';
 import TheCounter from './components/TheCounter.vue';
 import ChangeCounter from './components/Changecounter';
 import FavoriteValue from './components/FavoriteValue';
+import UserAuth from './components/UserAuth';
 
 export default {
   components: {
     BaseContainer,
     TheCounter,
     ChangeCounter,
-    FavoriteValue
+    FavoriteValue,
+    UserAuth
   },
 
   methods: {
     increaseCounter() {
       this.$store.dispatch('increase', { value: 10 });
     }
+  },
+  computed: {
+    ...mapGetters(['userIsAuthenticated'])
   }
 };
 </script>

2021-05-04_vuex-01-starting-setup/src/components/UserAuth.vue

@@ -0,0 +1,16 @@
+<template>
+  <button @click="login" v-if="!userIsAuthenticated">Login</button>
+  <button @click="logout" v-if="userIsAuthenticated">Logout</button>
+</template>
+<script>
+import { mapActions } from 'vuex';
+import { mapGetters } from 'vuex';
+export default {
+  methods: {
+    ...mapActions(['login', 'logout'])
+  },
+  computed: {
+    ...mapGetters(['userIsAuthenticated'])
+  }
+};
+</script>

2021-05-04_vuex-01-starting-setup/src/store.js

@@ -3,7 +3,8 @@ import { createStore } from 'vuex';
 const store = createStore({
   state() {
     return {
-      counter: 0
+      counter: 0,
+      isLoggedIn: false
     };
   },
   mutations: {
@@ -12,6 +13,9 @@ const store = createStore({
     },
     increase(state, payload) {
       state.counter = state.counter + payload.value;
+    },
+    setAuth(state, payload) {
+      state.isLoggedIn = payload.isAuth;
     }
   },
   getters: {
@@ -27,6 +31,9 @@ const store = createStore({
         return 100;
       }
       return finalCounter;
+    },
+    userIsAuthenticated(state) {
+      return state.isLoggedIn;
     }
   },
   actions: {
@@ -37,6 +44,12 @@ const store = createStore({
     },
     increase(context, payload) {
       context.commit('increase', payload);
+    },
+    login(context) {
+      context.commit('setAuth', { isAuth: true });
+    },
+    logout(context) {
+      context.commit('setAuth', { isAuth: false });
     }
   }
 });