Cara Menggunakan Vuex di Laravel 8

wahyunanangwidodo

wahyunanangwidodo Sabtu, 30 Oktober 2021

Cara Menggunakan Vuex di Laravel 8

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.

Cara Menggunakan Vuex di Laravel 8

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.

Cara Menggunakan Vuex di Laravel 8

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.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.