Feat/sensible data first

src/App.vue

@@ -1,23 +1,34 @@
 <template>
   <v-app>
-    <v-app-bar app color="primary" dark>
-      <div>Vue Template</div>
-    </v-app-bar>
-
+    <NavBar />
     <v-main>
-      <router-view />
+      <HelloWorld />
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
+import NavBar from "./components/NavBar.vue";
+import HelloWorld from "./components/HelloWorld.vue";
 
 export default Vue.extend({
   name: "App",
-
-  data: () => ({
-    //
-  }),
+  components: {
+    NavBar,
+    HelloWorld,
+  },
+  computed: {
+    userName() {
+      return this.$store.getters.userName;
+    },
+    unsmartUserName() {
+      return this.$store.getters.unsmartUserName;
+    },
+  },
+  created() {
+    console.debug("Data is already here! - App component - 😱!", this.userName); //blue
+    console.log("Data is not here! - App component", this.unsmartUserName); //white
+  },
 });
 </script>

src/README.md

@@ -0,0 +1,63 @@
+# vue-template - Loading application smartly (Global data)
+
+Hi, everyone! 👋
+
+This is a nice repo with some approaches to use in VueJS (2.x) projects. [You may find more here](https://github.com/open-ish/vue2-template) or change by the branch at GitHub.
+
+If you wanna, let's get in touch!
+
+## What're we gonna use?
+
+- [VueJS](https://vuejs.org/)
+- [Vuex](https://vuex.vuejs.org/)
+
+## Summary
+
+1. [Loading application smartly - glogal data](#Loading-application-smartly---global-data)
+2. [Pre-requirements](#Installation)
+
+## Loading application smartly - global data
+
+As a developer, you probably have noticed that there are differences between data that we have in applications.
+
+For example, if you imagine some e-commerce, we could have `user data`, cart data, catalogue data, etc. Of course, the kind of data changes by each application, but all applications will have a kind of `data scale relevance - I mean, some data are more important than others`. So, if you put it in mind, probably, `user data` will be the most important data in our example, and this happens because `user data` can be used to get all other data - `of course, it will depend on the project architecture`.
+
+It's really important to `understand the relevance/importance of each data and create our application respecting it`. So, again, let's get the e-commerce example. If the `user data` can be necessary to get all (or almost) other data, we need to make sure the `user data` is available as soon as possible. Because if we don't do that, we can have a lot of `async problems` with our application.
+
+As crazy it sounds, we can easily apply it at the Vue applications, but I have used all that context because the most important thing here is to understand the reason. And that approach will avoid that you have many async problems.
+
+[You can see the PR with key files here](https://github.com/open-ish/vue2-template/pull/2)
+
+[You can also watch a video about it here](https://youtu.be/WZu4SE_Her0) 🎥
+
+## Installation
+
+### Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### Run your unit tests
+
+```
+yarn test:unit
+```
+
+### Lints and fixes files
+
+```
+yarn lint
+```

src/components/HelloWorld.vue

@@ -1,75 +1,15 @@
 <template>
   <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">Welcome to Vuetify</h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br />please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank"
-            >Discord Community</a
-          >
-        </p>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
+    <h1>HelloWorld Component</h1>
+    <br />
+
+    <div v-once>
+      Using data smartly 🎉:<strong> {{ userName }} </strong>
+    </div>
+    <br />
+    <div v-once>
+      Using data unsmartly: <strong> {{ unsmartUserName }} </strong>
+    </div>
   </v-container>
 </template>
 
@@ -78,58 +18,23 @@ import Vue from "vue";
 
 export default Vue.extend({
   name: "HelloWorld",
-
-  data: () => ({
-    ecosystem: [
-      {
-        text: "vuetify-loader",
-        href: "https://github.com/vuetifyjs/vuetify-loader",
-      },
-      {
-        text: "github",
-        href: "https://github.com/vuetifyjs/vuetify",
-      },
-      {
-        text: "awesome-vuetify",
-        href: "https://github.com/vuetifyjs/awesome-vuetify",
-      },
-    ],
-    importantLinks: [
-      {
-        text: "Documentation",
-        href: "https://vuetifyjs.com",
-      },
-      {
-        text: "Chat",
-        href: "https://community.vuetifyjs.com",
-      },
-      {
-        text: "Made with Vuetify",
-        href: "https://madewithvuejs.com/vuetify",
-      },
-      {
-        text: "Twitter",
-        href: "https://twitter.com/vuetifyjs",
-      },
-      {
-        text: "Articles",
-        href: "https://medium.com/vuetify",
-      },
-    ],
-    whatsNext: [
-      {
-        text: "Explore components",
-        href: "https://vuetifyjs.com/components/api-explorer",
-      },
-      {
-        text: "Select a layout",
-        href: "https://vuetifyjs.com/getting-started/pre-made-layouts",
-      },
-      {
-        text: "Frequently Asked Questions",
-        href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
-      },
-    ],
-  }),
+  computed: {
+    userName() {
+      return this.$store.getters.userName;
+    },
+    unsmartUserName() {
+      return this.$store.getters.unsmartUserName;
+    },
+  },
+  created() {
+    console.debug(
+      "Data is also here! - HelloWorld component - 😱!",
+      this.userName
+    );
+    console.log(
+      "Data is not here! - HelloWorld component",
+      this.unsmartUserName
+    );
+  },
 });
 </script>

src/components/NavBar.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-app-bar app color="primary" dark>
+    <div>Vue Template - NavBar</div>
+    <v-spacer></v-spacer>
+
+    <div>
+      Unsmart data, but it works here: <strong>{{ unsmartUserName }} </strong>
+    </div>
+  </v-app-bar>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "NavBar",
+  computed: {
+    unsmartUserName() {
+      return this.$store.getters.unsmartUserName;
+    },
+  },
+  async created() {
+    await this.$store.dispatch("getUserDataUnsmatly");
+  },
+});
+</script>

src/main.ts

@@ -6,9 +6,15 @@ import vuetify from "./plugins/vuetify";
 
 Vue.config.productionTip = false;
 
-new Vue({
-  router,
-  store,
-  vuetify,
-  render: (h) => h(App),
-}).$mount("#app");
+const initApp = async () => {
+  await store.dispatch("getUserData");
+
+  new Vue({
+    router,
+    store,
+    vuetify,
+    render: (h) => h(App),
+  }).$mount("#app");
+};
+
+initApp();

src/store/index.ts

@@ -3,9 +3,61 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
+const helperService = () => {
+  return new Promise((resolve, reject) => {
+    fetch("https://randomuser.me/api/")
+      .then((res) => res.json())
+      .then((user) => {
+        resolve(user);
+      })
+      .catch(() => {
+        reject("something bad has happened :/ ");
+      });
+  });
+};
+
+const emptyUser = "sorry, it's empty 😔 ";
+
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {},
+  state: {
+    unsmartUserData: {} as any,
+    userData: {} as any,
+  },
+  getters: {
+    unsmartUserName(state) {
+      return state.unsmartUserData?.results?.[0]?.name?.first || emptyUser;
+    },
+
+    userName(state) {
+      return state.userData?.results?.[0]?.name?.first || emptyUser;
+    },
+  },
+  mutations: {
+    setUserDataUnsmatly(state, user) {
+      state.unsmartUserData = user;
+    },
+
+    setUserData(state, user) {
+      state.userData = user;
+    },
+  },
+  actions: {
+    async getUserDataUnsmatly({ commit }) {
+      try {
+        const data = await helperService();
+        commit("setUserDataUnsmatly", data);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    async getUserData({ commit }) {
+      try {
+        const data = await helperService();
+        commit("setUserData", data);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
 });