Test getFruits action with fruit-api

src/main.js

@@ -2,10 +2,8 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import axios from "axios";
 
 Vue.config.productionTip = false;
-Vue.prototype.$http = axios;
 
 new Vue({
   router,

src/store/actions.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export default {
+  getFruits: async ({ commit }) => {
+    const response = await axios.get("http://localhost:3000/fruit");
+    commit("setFruits", response.data.data);
+  }
+};

src/store/getters.js

@@ -0,0 +1,5 @@
+export default {
+  parsedFruits: () => {
+    return [{ id: 1 }];
+  }
+};

src/store/index.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import mutations from "./mutations";
+import actions from "./actions";
+import getters from "./getters";
 
 export const state = {
   fruits: [],
@@ -11,5 +13,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state,
-  mutations
+  mutations,
+  actions,
+  getters
 });

src/views/Fruits.vue

@@ -1,26 +1,20 @@
 <template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ fruits }}
+    {{ this.fruits }}
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "Fruits",
-  data() {
-    return {
-      fruits: []
-    };
+  computed: {
+    ...mapState(["fruits"])
   },
-  async mounted() {
-    await this.getFruits();
-  },
-  methods: {
-    async getFruits() {
-      const response = await this.$http.get("http://localhost:3000/fruit");
-      this.fruits = response.data.data;
-    }
+  async created() {
+    await this.$store.dispatch("getFruits");
   }
 };
 </script>