Menggunakan Vuex pada Laravel Jetstream Stack Inertia (Vue3)

Thumbnail image

Cara menggunakan Vuex pada Laravel Jetstream stack Inertia (Vue3) 

Langkah pertama kita install vuex terlebih dahulu dengan masukan perintah 

npm install [email protected] --save

 

Buat file stores.js di dalam “resources/js” 

 

import {
    createStore
} from 'vuex';

const stores = createStore({
    state: {
        counter: 0
    },
    mutations: {
        increment(state) {
            state.counter += 1;
        },
        decrement(state) {
            state.counter -= 1;
        }
    },
    actions: {
        increment({
            commit
        }) {
            commit('increment');
        },
        decrement({
            commit
        }) {
            commit('decrement');
        }
    }
});

export default stores;

Disini saya akan membuat contoh fungsi penambahan dan pengurangan 

 

Kemudian buka app.js dan import stores.js 

 

require('./bootstrap');

// Import modules...
import {
    createApp,
    h
} from 'vue';
import {
    App as InertiaApp,
    plugin as InertiaPlugin
} from '@inertiajs/inertia-vue3';
import {
    InertiaProgress
} from '@inertiajs/progress';
import stores from './stores/stores';

const el = document.getElementById('app');

createApp({
        render: () =>
            h(InertiaApp, {
                initialPage: JSON.parse(el.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            }),
    })
    .mixin({
        methods: {
            route
        }
    })
    .use(InertiaPlugin)
    .use(stores)
    .mount(el);

InertiaProgress.init({
    color: '#4B5563'
});

 

Selanjutanya buat component Conuter.vue di dalam Pages 

 

<template>
  <div class="flex justify-center mt-8">
    <div class="flex items-center">
      <button @click="decrement()"
        class="text-white p-2 pl-5 pr-6 bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
      >
        Kurang
      </button>
      <div class="mr-2 ml-2">
        {{ counter }}
      </div>
      <button @click="increment()"
        class="text-white p-2 pl-5 pr-6 bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
      >
        Tambah
      </button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["counter"]),
  },
  methods:{
      ...mapActions(['increment','decrement']),
  }
};
</script>

Kemudian buat route counter 

 

<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->name('dashboard');

Route::get('/counter', function () {
    return Inertia::render('Counter');
})->name('counter');

Kemudian buka browser akses ke http://localhost:8000/counter