VueJs-#08 Vuex

Dalam mengembangkan web menggunakan vue js, terkadang kita kesulitan dalam melakukan pengolahan data, contohnya saat memiliki data yang sama dan ingin di tampilkan di banyak component, mungkin sebagian akan mendeklarasikan data yang sama di masing-masing component, tentu cara ini tidak di anjurkan, karena programmer yang baik dapat meminimalisir penulisan code yang berulang-ulang walau code tersebut hanya di copy paste.

Dari masalah diatas lahirlah vuex, dalam website resminya di vuex.vuejs.org dikatakan bahwa vuex adalah sebuah pola management untuk aplikasi vue js.

Ada beberapa konsep inti dari vuex, yaitu :

  1. State => untuk menampung data murni.
  2. Getters => untuk melakukan penyaringan/manipulasi/pengurutan data.
  3. Mutation => untuk melakukan pengolahan data.
  4. Actions => sama seperti mutations, akan tetapi actions dapat asynchronous.

Persiapan

  1. Buat Project Menggunakan Vue CLI
  2. Install Axios
  3. Install Vue-Router

Selanjutnya kita akan men-install vuex, dengan mengetikkan perintah :

npm install vuex --save

Setelah itu kamu dapat membuat folder baru dengan nama store di dalam folder src,dan juga file index.js, state.js, getters.js, mutations.js dan actions.js didalam folder store yang telah kamu buat, strukturnya akan terlihat seperti berikut :

Jangan pusing dulu nanti akan di jelaskan satu persatu dari masing masing file yang telah kita buat barusan.

Membuat Component

Sebelumnya saya akan membuat component baru untuk tempat kita mencoba vuex di dalam folder components, kamu dapat membuat sebuah file dengan nama src/component/Belajar.vue, yang dapat dilihat pada gambar berikut :

<template lang="html">
  <div id="belajar">
    <h3>Belajar vuex</h3>
  </div>
</template>

<script>
export default {
  name: 'Belajar'
}
</script>
<style scoped>

</style>

Ubah isi src/App.vue menjadi sbb:

<template>
  <div id="app">
    <Belajar/>
  </div>
</template>

<script>
import Belajar from './components/Belajar.vue'

export default {
  name: 'app',
  components: {
    Belajar
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Jalankan program

npm run serve

Lalu buka http://localhost:8080

Mengimport Store State

Kita akan menggunakan vuex pada project vue dan mengimport file store/state.js dengan cara membuka file store/index.js dan tuliskan kode dibawah ini.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import state from './state'
export default new Vuex.Store({
    state
})

Perlu kita ingat kembali bahwa state berfungsi sebagai tempat untuk menampung data murni yang kita dapat baik dari API, LocalStorage atau lainnya.

Jika sudah mari kita beralih ke folder store/state.js, disini kita akan membuat sebuah variabel dengan nama author, yang dapat di lihat pada gambar berikut :

export default{
    'author' : 'Om Bagoes'
}

Selanjutnya cara memanggil author di dalam components, ada beberapa cara yang dapat dilakukan.

Cara pertama menggunakan map, untuk menggunakan map kamu harus mengimportnya terlebih dahulu dengan cara :

import { mapState } from 'vuex'
  export default {
    name: 'Belajar',
    computed : {
      ...mapState([
        'author'
      ])
    }
  }

Maka isi src/component/Belajar.vue

<template lang="html">
  <div id="belajar">
    <h3>Belajar vuex</h3>
    <h1>{{author}}</h1>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Belajar',
    computed : {
      ...mapState([
        'author'
      ])
    }
  }
</script>
<style scoped>
h3{
  background:red;
  color:#fff;
}
</style>

Jika dibuka http://localhost:8080 akan seperti berikut

Cara kedua menggunakan this.$store, untuk menggunakan this.$store cukup mudah, pertama saya akan menambahkan satu data lagi di dalam store/state.js dengan nama github, dengan begitu state.js akan menjadi seperti berikut :

export default{
    'author' : 'Om Bagoes',
    'weburl' : 'https://ombagoes.com'
}

untuk menggunakannya di dalam components/Belajar.vue kamu dapat mengetikkan this.$store.state.github.

<template lang="html">
  <div id="belajar">
    <h3>Belajar vuex</h3>
    <h1>{{author}}</h1>
    <a :href="this.$store.state.weburl">{{this.$store.state.weburl}}</a>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Belajar',
    computed : {
      ...mapState([
        'author'
      ])
    }
  }
</script>
<style scoped>
h3{
  background:red;
  color:#fff;
}
</style>

Melakukan Penyaringan dengan Getters

Sebelum memulai dengan getters, saya akan menambahkan data terlebih dahulu dengan nama “language” di dalam file store/state.js seperti berikut :

export default{
    'author' : 'Om Bagoes',
    'weburl' : 'https://ombagoes.com',
    'language' : [
        {'id' :1,'value':'Java'},
        {'id' :2,'value':'Dart'},
        {'id' :3,'value':'Ruby'},
        {'id' :4,'value':'Scala'},
    ]
}

Kemudian jangan lupa di import terlebih dahulu getters.js di dalam file store/index.js sehingga akan terlihat seperti berikut :

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import state from './state'
import getters from './getters'
export default new Vuex.Store({
    state,
    getters
})

Jika sudah, mari kita beralih ke file store/getters.js, di dalam file getters saya akan membuat sebuah fungsi yang menampilakan data hobi berdasarkan id, id akan menjadi parameternya yang di tentukan oleh user.

Saya akan membuat fungsinya dengan nama “findLanguageFilterId”, untuk mencarinya saya menggunakan method find() yang merupakan bawaan dari javascript, berikut kodingan dan penjelasannya :

export default{
    findLanguageFilterId : state => (id) => {
        return state.language.find((obj) => {
            return obj.id===id;
        });
    }
}

Sekarang kita beralih ke folder components/Belajar.vue, untuk selanjutnya dalam mengakses vuex, saya hanya akan menggunakan map saja.

Kamu import dulu getters-nya seperti berikut :

import { mapState, mapGetters } from 'vuex'
  export default {
    name: 'Belajar',
    computed : {
      ...mapState([
        'author'
      ]),
      ...mapGetters([
        'findLanguageFilterId'
      ])
    }

Maka isi src/component/Belajar.vue

<template lang="html">
  <div id="belajar">
    <h3>Belajar vuex</h3>
    <h1>{{author}}</h1>
    <a :href="this.$store.state.weburl">{{this.$store.state.weburl}}</a>
    <p>Id:{{findLanguageFilterId(2).id}}</p>
    <p>Value:{{findLanguageFilterId(2).value}}</p>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'
  export default {
    name: 'Belajar',
    computed : {
      ...mapState([
        'author'
      ]),
      ...mapGetters([
        'findLanguageFilterId'
      ])
    }
  }
</script>
<style scoped>
h3{
  background:red;
  color:#fff;
}
</style>

Pegolah Data dengan Mutation

Mutation adalah satu-satunya cara untuk merubah state. Jadi mutation ini bisa dibilang mirip event yang ada di dalam store. Mutation terdiri dari sebuah string nama dan handlernya.

Sumber:

  1. https://blog.arsmp.com/komputer/pemograman/vue-catatan-belajar-modular-vuex/
  2. https://medium.com/@alziqziq/berkenalan-dengan-vuex-part1-vuex-38cdc2ec4149

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>