Selain kita dapat menambahkan library vue.js dan menggunakan dalam satu project laravel, kita juga bisa menggunakan atau mengaktifkan state management / Vuex dalam satu aplikasi.
Vuex merupakan fitur atau tool terpisah yang memiliki library tersendiri yang tidak secara otomatis disertakan ketika kita menginstall vue. Kita perlu menginstall library dari Vuex dan menambahkannya ke Vue Instance untuk menggunakannya agar dapat mengakses store di setiap komponen yang kita miliki.
Cara penggunaannya juga tidak sulit. Kita hanya perlu mengaktifkan Vuex Store seperti biasanya. Jika ingin mencobanya, berikut langkah-langkah bagaimana menggunakan vuex di laravel.
Instalasi Laravel, Vue, dan Vuex
Jika hanya ingin menambahkan Vuex ke aplikasi laravel yang sudah ada, silahkan lewati untuk instalasi laravel dan library vue.
//instalasi laravel laravel new lavuex ca lavuex
//instalasi vue npm install npm install vue npm install vue-loader vue-template-compiler --save-dev
//instalasi vuex npm instal vuex
Konfigurasi vue
Selanjutnya kita buat vue instance dan root komponen. Silahkan lewati tahap ini jika jika sudah memilikinya.
Silahkan buka file app.js pada direktori resources/js, tambahkan dibawah ini.
import Vue from 'vue';
import App from './layouts/App';
new Vue({
el: '#app',
render: h => h(App),
});
Kemudian buat folder baru dengan nama layouts di direktori resources/js dan tambahkan file App.vue didalamnnya.
//resources/js/App.vue
<template>
<div>
<h1>Welcome</h1>
</div>
</template>
Buka welcome.blade.php, ubah html yang ada dengan dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{csrf_token()}}">
<title>LaVuex</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Kemudian jalankan laravel mix / compiling script.
npm run dev #atau gunakan 'watch' untuk meng'compile setiap perubahan npm run watch
Setelah selesai, kita jalankan aplikasi.
//jalankan pada tab baru php artisan serve
Buka devtools dan lihat pada menu Vuex. Terlihat Store tidak terdeteksi / belum aktif.
Selanjutnya mari kita mengaktifkannya. Silahkan buat folder baru dengan nama store didirektori resources/js dan tambahkan file index.js didalamnya. Kita import vuex pada store/index.js menggunakannya sebagai plugin.
//resources/js/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({})
Kemudian import store pada app.js dan tambahkan ke Vue Instance seperti dibawah ini.
...
import store from './store/index'
new Vue({
el: '#app',
store,
render: h => h(App),
});
Simpan dan kembali kita lihat vuex store pada devtools browser.
Vuex telah aktif dan siap digunakan.
Contoh
Store yang telah di tambahkan atau di 'inject' ke root dapat kita akses menggunakan this.$store di semua komponen selain menggunakan helper yang tersedia, seperti dibawah ini.
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
text: null,
},
getters: {
text (state) {
return state.text
},
},
mutations: {
SET_TEXT (state, value) {
state.text = value
},
},
actions: {
//
}
})
//App.vue
<template>
<div>
<h1 v-if="text">{{ text }}</h1>
<h1 v-else>Welcome</h1>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
}
},
computed:{
...mapGetters({
text: 'text',
})
},
created() {
this.$store.commit('SET_TEXT', 'Hello, world!')
},
}
</script>
Silahkan coba dan lihat hasil mutasi yang di lakukan.
Selesai
Demikian cara install dan cara menggunakan vuex di laravel. Silahkan dicoba dan dikembangkan.