Added vuex. Also integrated it with FAQs.

Author: tejas-hosamani

package.json

@@ -24,7 +24,7 @@
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import store from './store';
+import store from './store/store';
 import './registerServiceWorker';
 
 Vue.config.productionTip = false;

src/store/modules/FAQs.module.js

@@ -0,0 +1,28 @@
+const FAQsModule = {
+  namespaced: true,
+  state: {
+    FAQs: [],
+  },
+
+  mutations: {
+    ADD_FAQS(state, FAQs) {
+      state.FAQs = FAQs;
+    },
+  },
+
+  actions: {
+    addFAQsAction(context) {
+      fetch('https://api-dev.codinggarden.community/faqs')
+        .then(n => n.json())
+        .then(json => {
+          const dataItems = json.map(n => ({
+            ...n.attributes,
+            isOpen: false,
+          }));
+          context.commit('ADD_FAQS', dataItems);
+        });
+    },
+  },
+};
+
+export default FAQsModule;

src/store.js renamed to src/store/store.js

@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import FAQs from './modules/FAQs.module';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
+  modules: {
+    FAQs,
+  },
 });

src/views/FAQPage/FAQList.vue

@@ -1,19 +1,21 @@
 <template>
-  <ul class="data-list faq-data-list">
-    <li
-      :class="{ isClosed: !item.isOpen }"
-      :key="index"
-      class="data-item faq-data-item initBorder"
-      v-for="(item, index) in dataItems"
-    >
-      <TheQuestion :question="item.question" :toggleAccordion="toggleAccordion" />
-      <TheAnswer :answer="item.answer" />
-    </li>
-  </ul>
+  <div>
+    <ul :v-if="FAQs.length" class="data-list faq-data-list">
+      <li
+        :class="{ isClosed: !item.isOpen }"
+        :key="index"
+        class="data-item faq-data-item initBorder"
+        v-for="(item, index) in FAQs"
+      >
+        <TheQuestion :question="item.question" :toggleAccordion="toggleAccordion" />
+        <TheAnswer :answer="item.answer" />
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
-import fetch from 'node-fetch';
+import { mapActions } from 'vuex';
 import TheQuestion from './TheQuestion.vue';
 import TheAnswer from './TheAnswer.vue';
 
@@ -23,37 +25,40 @@ export default {
     TheQuestion,
     TheAnswer,
   },
-  data() {
-    return {
-      dataItems: [],
-    };
-  },
 
   props: {
     question: String,
     answer: String,
   },
 
   created() {
-    fetch('https://api-dev.codinggarden.community/faqs')
-      .then(n => n.json())
-      .then(json => {
-        this.dataItems = json.map(n => ({
-          ...n.attributes,
-          isOpen: false,
-        }));
-      });
+    this.faq();
+  },
+
+  computed: {
+    FAQs: {
+      get() {
+        return this.$store.state.FAQs.FAQs;
+      },
+
+      set(updated) {
+        this.$store.state.FAQs.FAQs = updated;
+      },
+    },
   },
 
   methods: {
     toggleAccordion(question) {
-      this.dataItems = this.dataItems.map(e => {
+      this.FAQs = this.FAQs.map(e => {
         if (e.question === question) {
           return { ...e, isOpen: !e.isOpen };
         }
         return { ...e, isOpen: false };
       });
     },
+    ...mapActions({
+      faq: 'FAQs/addFAQsAction',
+    }),
   },
 };
 </script>