Instal Vuex di Laravel 5

Beberapa pemrogram (programmer) yang menggunakan Laravel 5, mulai menggunakan VueJS sebagai framework untuk mengembangkan front-end. Selain karena sintaksnya lebih sederhana, preset VueJS dalam aplikasi Laravel juga membuat pemrogram jadi penasaran untuk mencobanya.

Salah satu fitur yang banyak disukai developer dalam VueJS adalah komponen (component). Komponen merupakan custom element yang bersifat reusable. Komponen punya banyak kelebihan, salah satunya adalah kemudahan maintenance.  Di sisi lain, fitur ini juga punya efek buruk, yaitu susahnya mengatur ketergantungan data antara satu komponen dengan komponen lainnya.

Oleh karena masalah di atas, pengembang VueJS menyediakan modul resmi dengan nama Vuex untuk manajemen data (state) dari VueJS. Lebih lengkap mengenai Vuex, dapat dibaca langsung pada halaman resminya.

Persiapan

Dalam tutorial kali ini, saya akan menjabarkan langkah demi langkah menginstal Vuex dalam Laravel sampai siap digunakan.

Sebelum masuk lebih jauh ke tutorial, pastikan kalian sudah menginstall Composer, PHP, NodeJS, dan NPM/Yarn di mesin lokal. Saya menggunakan PHP versi 7.1.7 dan NodeJS versi 6.9.0 pada saat ujicoba.

Perlu diperhatikan juga, dalam tutorial saya menggunakan Laravel 5.4 untuk ujicoba, baris atau berkas bisa berbeda pada versi framework yang berbeda.

Instal Laravel dan Modul NodeJS

Instal Laravel terlebih dahulu menggunakan Composer dengan perintah di bawah:

$ composer create-project laravel/laravel laravel-vuex

Jika Laravel installer sudah di-setup dalam mesin lokal, maka perintah di bawah cukup ringkas untuk dijalankan.

$ laravel new laravel-vuex

Direktori baru dengan nama laravel-vuex akan dibuat oleh Composer dengan isi framework Laravel.

Baca juga 3 Cara Mengunduh dan Menginstal Laravel.

Langkah instalasi bisa kalian dilewati dan langsung ke bagian instal modul NodeJS apabila sudah punya proyek aplikasi berbasis Laravel.

Masuk ke dalam direktori laravel-vuex, dan instal modul NodeJS yang dibutuhkan untuk pengembangan. Untuk menginstal module NodeJS, kalian bisa menggunakan NPM atau Yarn sesuai dengan preferensi masing-masing.

// masuk direktori aplikasi
$ cd laravel-vuex

$ npm install

// atau menggunakan Yarn
$ yarn install

Tunggu proses instalasi sampai kalian mendapati berbagai modul yang sudah diunduh ke dalam direktorinode_modules.

Dalam berkas webpack.mix.js, terdapat dua buah berkas yang akan dikompilasi menggunakan Webpack. Tanpa perlu mengubah pengaturan di sana, kalian bisa mengkompilasi ulang asset dengan menjalankan perintah berikut.

$ npm run dev

Atau jika kalian ingin mengkompilasi setiap ada perubahan asset, dapat menggunakan perintah watch-poll.

$ npm run watch-poll

Instal dan Inisiasi Vuex

Secara default, Vuex tidak terdaftar dalam modul NodeJS (lihat berkas package.json). Maka dari itu, kalian harus menginstalnya secara mandiri.

$ npm install --save-dev vuex

// atau menggunakan yarn

$ yarn add --dev vuex

Instalasi berhasil, dan kalian bisa melihat modul Vuex dalam direktori node_modules/vuex.

Sebelum Vuex dapat digunakan dalam Vue, kita perlu menginisiasinya. Hal paling mudah adalah mengimpor Vuex ke dalam berkas resources/assets/js/app.js. Sayangnya, hal ini tidak saya rekomendasikan karena akan menumpuk skrip pada satu berkas yang berakibat kesulitan dalam maintenance.

Hal paling baik adalah memisahkannya ke dalam berkas terpisah, kemudian menggunakan fitur import dan export modul di JavaScript (ES6).

Buat berkas baru dengan nama store.js dalam direktori resources/assets/js. Langkah pertama, kalian perlu mengimpor VueJS dan Vuex terlebih dahulu, kemudian menggunakan Vuex dalam VueJS.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Langkah selanjutnya adalah mendefinisikan state, getter, mutation, dan action dalam bentuk konstanta.

const state = {

}

const getters = {

}

const mutations = {

}

const actions = {
    
}

Konstanta di atas dimasukkan sebagai parameter instance Vuex bersamaan dengan diekspornya modul tersebut.

export default new Vuex.store({
    state,
    getters,
    mutations,
    actions
})

Jika skrip di atas disatukan, maka hasil lengkapnya adalah sebagai berikut.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

}

const getters = {

}

const mutations = {

}

const actions = {
    
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

Simpan berkas dan pastikan tidak ada sintaks yang error ketika digunakan dalam VueJS.

Registrasi Vuex pada Vue

Vuex belum dapat digunakan sepenuhnya dalam aplikasi karena belum didaftarkan pada VueJS. Untuk mendaftarkannya, kalian perlu memodifikasi berkas app.js dalam direktori resources/assets/js.

Sebelum instance modul VueJS, import terlebih dahulu sebagai modul store dari berkas store.js.

import store from './store'

Tambahkan modul store pada instance VueJS di baris 20 (untuk Laravel 5.4).

const app = new Vue({
    store,
    el: '#app'
});

Itu sudah! Vuex siap digunakan bersamaan dengan VueJS di aplikasi berbasis Laravel.

Kompliasi Ulang Asset

Di atas, saya menggunakan sintaks yang tersedia pada ES6. Beberapa sintaks yang digunakan, belum sepenuhnya didukung oleh sebagian peramban (browser). Oleh karenanya, kita perlu bantuan Webpack untuk mengkompilasinya menjadi Common JS. Tenang, kompilasi menggunakan Webpack sudah dipermudah dengan modul yang telah dikembangkan Laravel, namanya Laravel Mix.

Selama masa pengembangan, saya sarankan untuk menjalankan perintah watch-poll. Seperti yang saya singgung di atas, perintah ini memungkinkan Webpack mengkompilasi ulang secara otomatis ketika ada perubahan isi skrip.

$ npm run watch-poll

Sedangkan untuk deploy ke aplikasi produksi, kalian direkomendasikan untuk menggunakan perintah production. Perintah tersebut berfungsi untuk mengkompilasi skrip menjadi Common JS yang hampir berjalan di semua peramban mainstream. Selain itu, berkas yang sudah dikompilasi juga akan dikompres yang berimbas menyusutnya ukuran berkas dan peningkatan kecepatan akses.

$ npm run production

Ujicoba

Untuk bagian ini, izinkan saya memberi contoh. Walau, seharusnya kalian sudah harus paham apa yang akan dilakukan. 😀

Pertama, saya menambahkan key title, pada konstanta state. Secara bawaan, isinya adalah string kosong.

const state = {
  title: ''
}

Kedua, saya menambahkan mutation baru agar dapat mengubah nilai state title secara dinamis.

Belum ada aturan baku dalam penamaan fungsi mutation, saya sendiri lebih sering menuliskan dalam huruf kapital agar lebih mudah membedakannya dengan action.

const mutations = {
  SET_TITLE (state, title) {
    state.title = title
  }
}

Langkah selanjutnya, implementasi pada komponen VueJS.

Laravel telah memberikan contoh sederhana komponen VueJS dengan nama Example.vue yang tersimpan dalam direktori resources/assets/js/components. Kebetulan, komponen ini juga sudah didaftarkan dengan nama example. Di HTML, kalian bisa menggunakan tag  <example></example> untuk memuat komponen tersebut.

Nah, state title di atas akan saya gunakan pada komponen Example.vue, mengubah nilainya pada saat komponen dimuat untuk pertama kali.

Buka berkas Example.vue, kemudian modifikasi isinya menjadi seperti berikut.

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{ title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // load mapState first
    import { mapState } from 'vuex';

    export default {
        name: 'Example',

        mounted () {
            // change title dynamically
            this.$store.commit('SET_TITLE', 'Hello Laravel, Vue, and Vuex')
        },

        computed: mapState({
            // read state from store
            title: state => state.title
        })
    }
</script>

Dimulai dari baris ke-19, komponen mengimpor modul mapState dari Vuex. Kemudian melakukan commit untuk state title pada fungsi mounted() di baris ke-26. State title berhasil dimutasi (diubah nilainya) sesuai dengan parameter pada commit. Untuk membaca state tersebut pada komponen Example.vue, kalian bisa menggunakan mapState pada fungsi computed().

Langkah terakhir, memuat komponen example.Vuedengan tag <example></example>  pada HTML, atau Blade di manapun kalian mau. Jangan lupa untuk mengkompilasi asset terlebih dahulu!

Untuk ujicoba lebih baik, VueJS sudah menyediakan ekstensi untuk peramban di Chrome/Chromium dengan nama Vue devtools. Penggunaan ekstensi ini sangat direkomendasikan ketika mengembangkan aplikasi berbasis VueJS. Dari ekstensi ini, kita bisa melihat daftar komponen, data, event, serta state dalam Vuex.

Debugging dengan Vue Devtools

Debugging dengan Vue Devtools

Contoh bootstrap aplikasi saya publikasikan pada repositori Github yang bisa kalian dapatkan dari tautan ini.

Vuex di Laravel

Vuex di Laravel

Selamat mencoba! 😉

Tinggalkan Balasan