module warna

Author: kirbi

public/js/app.js

@@ -1,8 +1,10 @@
 require('./bootstrap');
 window.Vue = require('vue');
+import store from './store'
 
-Vue.component('vuex-example', require('./components/VuexExample.vue'));  
+Vue.component('vuex-bahasa', require('./components/VuexBahasa.vue'));  
 
 const app = new Vue({
     el: '#app',
+    store
 });

resources/assets/js/app.js

@@ -0,0 +1,15 @@
+<template>
+  <bahasa/> 
+</template>
+
+<script>
+//komponenn modul kemudian panggil diatas
+  import bahasa from 'modul/Bahasa'
+  
+  export default{
+    name: 'VuexBahasa',//
+    components: {
+      bahasa //memanggil modul
+    }
+  }
+</script>

resources/assets/js/components/VuexBahasa.vue

@@ -3,11 +3,11 @@
 import axios from 'axios'
 
 //function get data
-const getData= function getData(context){
+const getData = function getData(context){
     axios 
         .get('https://api.nasa.gov/planetary/apod?api_key=NNKOjkoul8n1CH18TWA9gwngW1s1SmjESPjNoUFo')
         .then(response =>{
-            context.comit('UPDATE_DATA1',response.data) //response.data untuk mengirim data dalam bentuk objek
+            context.commit('UPDATE_DATA1',response.data) //response.data untuk mengirim data dalam bentuk objek
         });
 }
 export default{

resources/assets/js/modul/frameProduct/store/action.js renamed to resources/assets/js/modul/FrameProduct/store/actions.js

@@ -0,0 +1,41 @@
+<template>
+    <table class="table">
+        <thead>
+            <tr>
+            <th scope="col">Album</th>
+            <th scope="col">Id</th>
+            <th scope="col">Title</th>
+            <th scope="col">Image</th>
+            </tr>
+        </thead>
+        <tbody v-for="warna2 in warna" :key="warna2.id">
+                <td>{{ warna2.albumId}}</td>
+                <td>{{ warna2.id }}</td>
+                <td>{{ warna2.title }}</td>
+                <td ><img v-bind:src="warna2.thumbnailUrl"> </td>
+        </tbody> 
+    </table>
+</template>
+<script>
+import store from './store'
+import {mapActions,mapGetters} from 'vuex'
+
+export default {
+  name: 'Warna',
+  created(){
+    const STORE_KEY='$_warna';
+    if(!(STORE_KEY in this.$store._modules.root._children)){ //mengecek store dengan nama store_key
+        this.$store.registerModule(STORE_KEY,store)
+    }
+  },
+  mounted(){
+    this.$store.dispatch('$_warna/getDataWarna')
+  }, 
+  computed:{
+    ...mapGetters({
+        warna:'$_warna/ragamWarna'  //mengganti nnama data
+    })
+  }
+}
+</script>
+

resources/assets/js/modul/frameProduct/store/mutation.js renamed to resources/assets/js/modul/FrameProduct/store/mutations.js

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+//function get data
+const getDataWarna = function getDataWarna(context){
+    axios 
+        .get('https://jsonplaceholder.typicode.com/photos')
+        .then(response =>{
+            context.commit('RAGAM_WARNA',response.data) //response.data untuk mengirim data dalam bentuk objek
+        });
+}
+export default{
+    getDataWarna
+}

resources/assets/js/modul/bahasa/index.vue

@@ -0,0 +1,9 @@
+//menerima data dari muttions
+
+const ragamWarna= function ragamWarna(state){
+    return state.ragamWarna
+} //const digunakan untuk export data
+
+export default{
+    ragamWarna
+}

resources/assets/js/modul/bahasa/store/actions.js

@@ -0,0 +1,17 @@
+//file state
+
+import actions from './actions'
+import mutations from './mutations'
+import getters from './getters'
+
+const state={
+    ragamWarna:{}
+}
+//untuk mengirim data1 ke index.vue / agar ke file yg membutuhkan
+export default{
+    namespaced:true,
+    state,
+    actions,
+    mutations,
+    getters
+}

resources/assets/js/modul/bahasa/store/getters.js

@@ -0,0 +1,8 @@
+const RAGAM_WARNA=function RAGAM_WARNA(state,data){ //state mengakses data yang dipakai , data satu merupaka data yang dikirim dari action
+    state.ragamWarna=data
+    //segala operasi dilakukan disini
+}
+ 
+export default{
+    RAGAM_WARNA
+}