Vuex adalah library Vue.js yang dapat digunakan untuk meng-handle state (state manajemen), dimana data yang ada dapat didefinisikan dan dipusatkan pada sebuah file sehingga bisa digunakan oleh semua component yang ada.
Dengan menggunakan Vuex, komunikasi antar component menjadi lebih mudah. Sebagaimana yang kita ketahui bahwasanya dalam interaksi antar component agar dapat saling bertukar data adalah dengan menggunakan props, maka dengan Vuex kamu cukup mengakses state yang telah didefinisikan pada Vuex Store.
Persiapan
Artikel ini merupakan bagian pertama, maka kita memulainya dengan project yang masih fresh install. Install Vue.js dengan menggunakan vue cli:
vue create vue-bootstrap-vuex
Pilih enable options router & vuex
Sehingga Struktur direktorinya menjadi seperti gambar di bawah ini :
vue with router, vuex, & bootstrap
Perhatikan gambar di atas pada folder src terdapat file-file bawaan options penginstallan router & vuex :
router.js, file ini berfunsi untuk mendefinisikan router2 berdasarkan komponen, dibuat otomatis karena kita menyertakan options vue-router
store.js, file ini berisi state vuex dibuat otomatis karena kita menyertakan options vuex
views, folder ini berisi template views untuk komponen dibuat otomatis karena kita menyertakan options vue-router
Setelah selesai untuk mempercantik tampilan kita menggunakan theme bootstrap Install bootstrapVue
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
},
{
path: "/learningvuex",
name: "LearningVuex",
component: () =>
import("./views/LearningVuex.vue")
}
]
});
Firebase adalah infrastruktur cloud real-time untuk aplikasi sisi klien, yang memungkinkan pengembang mengubah aplikasi kerangka Front-end apa pun seperti Vue, React, Angular, iOS atau Android menjadi produk tumpukan penuh yang mampu melakukan penskalaan tanpa batas di cloud.
Persiapan
Install Project menggunakan Vue Cli
vue create vue-firebase
Pilih Manually select feature, lalu ceklis pilihan berikut :
Select Options
Install Theme BootstrapVue
vue add bootstrap-vue
Install Firebase into Vue Project
npm install firebase --save
Buat Project di FireBase
Sebelum memulai membuat Program, kita akan menyiapkan Proyek di Firebase, masuk ke Firebase Console buat Proyek baru, setelah selesai masuk ke Menu Project Overview => Setelan proyek
Setelan Proyek
Menambahkan Firebase ke Aplikasi Web
Parameter Pengaturan Firebase
Sekarang kita akan membuat setingan untuk firebase di Program Vue kita sesuaikan dengan gambar di atas. Buka main.js tambahkan baris berikut diantara import dan Vue.config.productionTip = false;
router.beforeEach berfungsi untuk meredirect page yang memiliki property :
meta: {
auth: true
}
Singkatnya jika belum login atau user kosong route akan diredirect kembali ke route Login.
Menyiapkan Store
Kita perlu menyiapkan store untuk menyimpan status login & data user yang nantinya akan ditampilkan pada component Profile.vue
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLogin:false,
user:null
},
mutations: {},
actions: {}
});
Login component menggunakan FirebaseUI
FirebaseUI adalah library yang dibuat sebagai tambahan dari Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan dalam aplikasi Anda. Baca penjelasannya disini.
Sekarang kita akan menambahkan FirebaseUI di program Vue kita
npm install firebaseui --save
Karena kita akan login menggunakan gmail atau email, maka kita harus mengaktifkan options Authentication pada Firebase Console. Masuk ke Menu Authentication=>Pilih Tab Metode Login lalu aktifkan pilihan Email & Google
Metode Login
Setelah itu kita buat component Login.vue yang nantinya akan menampilkan halaman login.
<template>
<div>
<br/><br/><br/><br/>
<h5 class="center-align">Login</h5>
<section id="firebaseui-auth-container"></section>
</div>
</template>
<script>
import firebase from "firebase";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";
export default {
name: "Login",
data() {
return {};
},
mounted() {
let ui = firebaseui.auth.AuthUI.getInstance();
if (!ui) {
ui = new firebaseui.auth.AuthUI(firebase.auth());
}
var uiConfig = {
signInSuccessUrl: "/profile", // This redirect can be achived by route using callback.
signInFlow: "popup",
signInOptions: [
//firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
};
ui.start("#firebaseui-auth-container", uiConfig);
}
};
</script>
<style>
</style>
Perhatikan baris signInSuccessUrl: “/profile”, Jika login berhasil route akan diarahkan ke route /profile.
Buat Program
Selanjutnya kita akan membuat sebuah component NavBar.vue yang nantinya bisa diakses di setiap component jika dalam posisi login, untuk mempercantik tampilannya kita akan menambahkan BootstrapVue proyek kita.
NavBar.vue mengatur penyimpanan status login jika ada perubahan status jika login akan menyimpan data user di store dan menghapus data user jika sebaliknya.