Merge pull request #14 from denOldTimer/chapter-nine

Chapter nine

README.md

@@ -229,6 +229,16 @@ Lifecycle hooks : { [beforeCreated], [created], [beforeMount], [mounted],
 3. Modified App.vue to work with the router to role it back just `ctrl +z`
 4. Router guards are the before and after events of a route
 
+5. **DOWNLOAD** **[release 1.7.0](https://github.com/denOldTimer/releases/1.8.0)**
+
+---
+
+## Advanced : Chapter 9 : Global State Management with Veux 4
+
+1. install using the vue ui
+2.
+3. **DOWNLOAD** **[release 1.7.0](https://github.com/denOldTimer/releases/1.9.0)**
+
 ---
 
 [data]: https://v3.vuejs.org/api/options-data.html#data-2

package.json

@@ -12,12 +12,14 @@
     "core-js": "^3.6.5",
     "npm": "^7.6.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",

src/App.vue

@@ -4,27 +4,26 @@
       <router-link to="/">
         <div class="navigation__logo">Twotter</div>
       </router-link>
-      <div class="navigation__user">
-        {{ state.user.username }}
+      <div class="navigation__user" v-if="user">
+        {{ user.username }}
       </div>
     </nav>
     <router-view />
   </div>
 </template>
 
 <script>
-import { reactive } from "vue";
+import { useStore } from "vuex";
+import { computed } from "vue";
 
 export default {
   name: "App",
   setup() {
-    const state = reactive({
-      user: {
-        username: "_MitchellRmney",
-      },
-    });
+    const store = useStore();
+    const user = computed(() => store.state.User.user);
+
     return {
-      state,
+      user,
     };
   },
 };

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(store).use(router).mount('#app')

src/router/index.js

@@ -1,46 +1,51 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
-import UserProfile from '../views/UserProfile.vue'
-import Admin from '@/views/Admin'
-
+import { createRouter, createWebHistory } from "vue-router";
+import store from "@/store";
+import { users } from "@/assets/users";
+import Home from "../views/Home.vue";
+import UserProfile from "../views/UserProfile.vue";
+import Admin from "@/views/Admin";
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: "/",
+    name: "Home",
+    component: Home,
   },
   {
-    path: '/user/:userId',
-    name: 'UserProfile',
-    component: UserProfile
+    path: "/user/:userId",
+    name: "UserProfile",
+    component: UserProfile,
   },
 
   {
-    path: '/admin',
-    name: 'Admin',
+    path: "/admin",
+    name: "Admin",
     component: Admin,
     meta: {
-      requiresAdmin: true
-    }
-  }
-
-]
+      requiresAdmin: true,
+    },
+  },
+];
 
 const router = createRouter({
   //history: createWebHashHistory(),  remove the hashtag in the url
   history: createWebHistory(),
-  routes
+  routes,
 });
 
-
 //router.beforeEach(async (to, from, next))
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  const user = store.state.User.user;
+
+  if (!user) {
+    //get user from api
+    await store.dispatch("User/setUser", users[0]);
+  }
   const isAdmin = true;
-  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin);
+  const requiresAdmin = to.matched.some((record) => record.meta.requiresAdmin);
 
-  if (requiresAdmin && !isAdmin) next({ name: 'Home' })
+  if (requiresAdmin && !isAdmin) next({ name: "Home" });
   else next();
-})
+});
 
-export default router
+export default router;

src/store/User.js

@@ -0,0 +1,21 @@
+export const UserModule = {
+  namespaced: true,
+
+  state: {
+    user: null,
+  },
+
+  // Mutations are functions that effect the state
+  mutations: {
+    SET_USER(state, user) {
+      state.user = user;
+    },
+  },
+
+  // Actions are functions that you call throughout your application that call mutations
+  actions: {
+    setUser({ commit }, user) {
+      commit("SET_USER", user);
+    },
+  },
+};

src/store/index.js

@@ -0,0 +1,16 @@
+import { createStore } from "vuex";
+import { UserModule } from "./User";
+
+export default createStore({
+  state: {},
+
+  // Mutations are functions that effect the state
+  mutations: {},
+
+  // Actions are functions that you call throughout your application that call mutations
+  actions: {},
+
+  modules: {
+    User: UserModule,
+  },
+});