Test getFruits action with fruit-api

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>