State Management Vuejs Menggunakan VUEX

Uncategorized

Welah, ternyata sudah lama saya gak coret2 di blog, hmm itung2 bagi2 artikel gratis lahya, wkwkwk, oke. next..

sudah pernah pakai vuejs? gimana rasanya? untuk mangamagent data yang di konsumsi dari api biasanya temen2 gimancaranya? langsung saja deh,

nah vuejs sendiri mengeluarkan state managemnt yang dinamakan VUEX, vuex adalah salah satu library state management pada vuejs yang berfungsi sebagai central store data semua componen pada suatu aplikasi. ketika aplikasi kita sudah mulai besar, dan tentunya data2 sudah mulai besar juga, nah disini kita disunnahkan pakai state mangemtn yang baik, salah satunya pakai VUEX ini. nah terus gimana jika aplikasi kita masih sederhana? ya kalau masi sederhana pakai saja props dan emit sudah cukup, jadi gak terlalu mengeluarkan effort yang banyak.

Simple state mangement menggunakan VUEX bisa menggunakan langkah berikut

  1. install lib Vuex (npm install vuex –save )
  2. buat folder store pada dir src
  3. buat file .js, nah contoh kita buat simple store data dengan nama index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		count: 0
	},
	getters: {
		getCounter: state => {
			return state.count
		}
	},
	mutations: {
		increment (state) {
			state.count++	
		},
		decrement (state) {
			if(state.count > 0) {
				state.count--
			}
		}
	}	
})

Nah contoh sederhana code diatas kira2 seperti ii :

  • State, State digunakan untuk tempat penyimpanan data, kalau diibaratkan semacam inisiasi varibale pada beberapa basaha pemograman, misal di javascript var xxx, di php $xxx dan lain2.
  • Getter, getter digunakan untuk mengakses data, selain itu getter selain digunakan untuk akses data biasanya juga digunakan untuk pengolahan data sebelum data di tampilkan di frondend.
  • Mutattions, mutation digunakan untuk mengubah state, dimana data yang sudah di definisikan di dalam state, bisa diubah2 di mutations,

Leave a Reply

Your email address will not be published. Required fields are marked *