[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-kenalan-dengan-vuex-state-management-di-vue-js":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},328,"kenalan-dengan-vuex-state-management-di-vue-js","Kenalan dengan Vuex, Tutorial State Management di Vue Js","Agus Yusida December 12, 2018 Halo teman ngide! Kali ini kita akan melanjukan belajar tentang vuejs, lebih tepatnya tentang bagaimana mengatur state di dalam aplikasi vue js yang kita punya. Kalau di ",null,[],"2019-03-17T16:00:00Z","2026-07-14T04:39:30.846305Z","\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>  \u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida December 12, 2018\u003Cp>Halo teman ngide! Kali ini kita akan melanjukan belajar tentang vuejs, lebih tepatnya tentang bagaimana mengatur state di dalam aplikasi vue js yang kita punya.\u003C\u002Fp>\u003Cp>Kalau di React mereka punya Redux, di VueJS, mereka punya yang namanya Vuex.\u003C\u002Fp>\u003Cp>Lalu kenapa kita harus menggunakan Vuex untuk state management?\u003C\u002Fp>\u003Cp>Kemudahan utama kenapa kita harus menggunakan Vuex sebagai \u003Cem>centralized state management \u003C\u002Fem>adalah mempermudah mengakses state atau data di beberapa component sekaligus.\u003C\u002Fp> \u003Cp>\u003Cem>\u003Cstrong>Catatan\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fp>\u003Cp>\u003Cem>Penggunaan state management tidak selalu harus dilakukan. Jadi jika data yang diperlukan hanya sedikit dan bisa di hadle dengan data flow yang standar seperti menggunakan props atau emit event maka itu udah cukup. Tapi jika casenya kalian butuh mengakses data yang banyak dan bisa di reuse di component lain maka Vuex menjadi pilihan yang tepat. \u003C\u002Fem>\u003C\u002Fp>\u003Cp>\u003Cstrong>Apa itu Vuex?\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Saya kutip dari dokumentasi official, Vuex adalah sebuah \u003Cem>state management pattern\u003C\u002Fem> dan library untuk aplikasi VueJS.  Vuex bertugas sebagai \u003Cem>centralized store \u003C\u002Fem>untuk semua component yang di dalam aplikasi kamu, yang memastikan bahwa state hanya bisa di rubah dengan cara yang pasti.\u003C\u002Fp>\u003Cp>\u003Cstrong>Konsep Utama Vuex\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Jadi sebelum langsung ngoding, ada baiknya kita mengenal beberapa konsep dasar yang ada di dalam Vuex. Pusat dari Vuex adalah sebuah “\u003Cem>store” \u003C\u002Fem>yang akan berfungsi sebagai kontainer dari semua state yang ada di dalem aplikasi kamu. Di dalam \u003Cem>store\u003C\u002Fem> memilki beberapa bagian-bagian yang dengan fungsinya masing-masing yaitu:\u003C\u002Fp>\u003Ch3>1. State\u003C\u002Fh3>\u003Cp>State adalah sebuah object dimana tempat semua data aplikasi berada. Contohnya kurang lebih seperti ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>const store = new Vuex.Store({\n  state: {\n    count: 1,\n    color: 'red'\n  }\n})\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi state ini saya bilangnya sebuah json yang berisi data-data yang akan kita akses dari component yang ada.\u003C\u002Fp>\u003Cp>Untuk cara mengaksesnya state langsung seperti contoh di atas dengan menggunakan \u003Ccode>store.state.count\u003C\u002Fcode> atau \u003Ccode>store.state.color\u003C\u002Fcode>. Atau menggunakan global vuex  tanpa harus di import di setiap component dengan \u003Ccode>this.$store.state.count\u003C\u002Fcode> .\u003C\u002Fp>\u003Ch3>2. Getter\u003C\u002Fh3>\u003Cp>Sesuai namanya, Getter berfungsi untuk mengakses state.\u003C\u002Fp>\u003Cp>Lalu apa bedanya mengakses state secara langsung dan melalu Getter?\u003C\u002Fp>\u003Cp>Dengan menggunakan Getter kita bisa mengolah terlebih dahulu state yang akan kita ambil seperti fungsi computed yang ada di VueJS. Jadi kita bisa memfilter data state sebelum di panggil. \u003C\u002Fp>\u003Cp>Contohnya:\u003C\u002Fp>\u003Cpre>\u003Ccode>getters: {\n        doneTodos(state){\n            return state.todos.filter(function(item){\n                return item.done == true\n            })\n        },\n        pendingTodos(state){\n            return state.todos.filter(function(item){\n                return item.done == false\n            })\n        },\n    },\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Mutation\u003C\u002Fh3>\u003Cp>Mutation adalah satu-satunya cara untuk merubah state. Jadi mutation ini bisa dibilang mirip event yang ada di dalam store. Mutation terdiiri dari sebuah string nama dan handlernya. \u003C\u002Fp>\u003Cp>Contohnya gini:\u003C\u002Fp>\u003Cpre>\u003Ccode>const store = new Vuex.Store({\n  state: {\n    count: 1\n  },\n  mutations: {\n    increment (state) {\n      \u002F\u002F mutate state\n      state.count++\n    }\n  }\n})\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah di atas kita punya sebuah mutations dengan \u003Cem>type name\u003C\u002Fem> \u003Cstrong>increment\u003C\u002Fstrong> yang memilki handler dimana jika dipanggil akan menambah nilai dari state count sebanyak 1. \u003C\u002Fp> \u003Cp>Lalu cara memanggillnya di dalam component adalah dengan \u003Ccode>this.$store.commit('nama mutation')\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3>4. Action\u003C\u002Fh3>\u003Cp>Apa lagi nih \u003Cstrong>\u003Cem>action\u003C\u002Fem>\u003C\u002Fstrong>? \u003Cstrong>Action\u003C\u002Fstrong> mirip dengan mutation, bedanya adalah mutation hanya bisa di akses secara \u003Cem>synchronous\u003C\u002Fem> sedangankan action bisa di akses secara \u003Cem>asynchronous. \u003C\u002Fem>\u003C\u002Fp>\u003Cp>Tidak tahu apa bedanya synchronous dengan assynchronous? \u003Cstrong>Google\u003C\u002Fstrong> haha.\u003C\u002Fp>Rekomendasi:  Belajar Vue Js: Membuat Aplikasi Todolist Sederhana\u003Cp>Nah \u003Cem>action\u003C\u002Fem> ini tidak merubah state, tapi action akan memanggil \u003Cem>mutation\u003C\u002Fem> dan \u003Cem>mutation\u003C\u002Fem> yang akan merubah state.\u003C\u002Fp>\u003Cp>Kita butuh action ketika melakukan proses asynchronous dan perlu untuk merubah state. Misalnya saat selesai melakukan request ajax. Cara memanggil state di component atau biasa dibilang \u003Cem>dispatch\u003C\u002Fem> adalah dengan \u003Ccode>this.$store.dispatch('nama action')\u003C\u002Fcode>\u003C\u002Fp>\u003Ch3>5. Modules\u003C\u002Fh3>\u003Cp>Seperti yang kita bahas soal state sebagai sebuah single tree json dan harus menampung semua state disana. Maka saat kita punya banyak sekali state yang harus di handle maka datanya akan membengkak dan susah untuk di maintenance.\u003C\u002Fp>\u003Cp>Solusinya adalah dengan menggunakan \u003Cem>modules.\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Jadi \u003Cem>store\u003C\u002Fem> yang tadi besar itu kita bisa pecah-pecah lagi menjadi \u003Cem>module\u003C\u002Fem> yang lebih kecil. Menariknya masing-masing \u003Cem>module\u003C\u002Fem> ini selain berisi \u003Cem>state\u003C\u002Fem>, juga bisa berisi \u003Cem>mutation\u003C\u002Fem>, \u003Cem>getter\u003C\u002Fem>, dan \u003Cem>action\u003C\u002Fem> sendiri.\u003C\u002Fp>\u003Cp>Kita lihat saja contohnya di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>const moduleA = {\n  state: { ... },\n  mutations: { ... },\n  actions: { ... },\n  getters: { ... }\n}\nconst moduleB = {\n  state: { ... },\n  mutations: { ... },\n  actions: { ... }\n}\nconst store = new Vuex.Store({\n  modules: {\n    a: moduleA,\n    b: moduleB\n  }\n})\nstore.state.a \u002F\u002F -> `moduleA`'s state\nstore.state.b \u002F\u002F -> `moduleB`'s state\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah kita sudah belajar sedikit konsep dasar seperti apa sih Vuex itu.\u003C\u002Fp>\u003Cp>Selanjutnya kita coba implementasikan Vuex ke dalam aplikasi VueJS yang sudah pernah kita buat sebelumnya yaitu tentang bagaimana cara membuat todolist, kalian bisa baca disini: Mebuat Todolist Dengan VueJS. Kalian wajib mengikuti tutorial sebelumnya karena code yang di pakai adalah code todolist app sebelumnya.\u003C\u002Fp>\u003Ch3>Include Vuex\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>index.html\u003C\u002Fcode> dan tambahkan script vuex ini di bawah script vuejs.\u003C\u002Fp>\u003Cpre>\u003Ccode><script src=\"https:\u002F\u002Funpkg.com\u002Fvue\"><\u002Fscript>\n<script src=\"https:\u002F\u002Funpkg.com\u002Fvuex\"><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Membuat Store\u003C\u002Fh3>\u003Cp>Buka file app.js, kita akan membuat Vuex store.\u003C\u002Fp>\u003Cp>tambahkan \u003Ccode>const store\u003C\u002Fcode> seperti di bawah ini sebelum pemanggilan VueJS. Lalu tambahkan \u003Ccode>const store\u003C\u002Fcode>  itu ke dalam pemanggilan VueJS.\u003C\u002Fp>\u003Cpre>\u003Ccode>const store = new Vuex.Store({\n    state: {\n    },\n    mutations: {\n      },\n    getters: {\n    },\n})\nvar app = new Vue({\n    el: '#app',\n    store,\n    data: {\n        'message': 'Hello world'\n    },\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sekarang kita coba buka di browser, disini saya memakai Chrome dan buka developer console dan di tab Vue, kamu bisa mengecek apakah Vuex sudah terinstall dengan baik di aplikasi yang kita buat\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch3>Memindahkan data todos ke dalam State\u003C\u002Fh3>\u003Cp>Sekarang saatnya memindahkan data todos yang sebelumnya ada di dalam component ke dalam \u003Cem>state\u003C\u002Fem> di \u003Cem>“store”\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Pindahkan seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>state: {\n        todos: [\n        {\n            name: 'Todo 1',\n            done: false,\n        },\n        {\n            name: 'Todo 2',\n            done: false,\n        },\n        {\n            name: 'Todo 3',\n            done: false,\n        },  \n        ],\n    },\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Karena data todos sudah berpindah ke state, tentu cara memanggilnya dari dalam component sudah berbeda. Kita edit component todo dan tambahkan sebuah \u003Cem>computed function todos\u003C\u002Fem> untuk mengambil data todo dari state.\u003C\u002Fp>\u003Cpre>\u003Ccode>Vue.component('todo',{\n    template: '<div class=\"container\">'+\n    '<div class=\"row justify-content-center\">'+\n    '<div class=\"col-md-6\">'+\n    '<h1 class=\"text-center\">Todolist<\u002Fh1>'+\n    '<hr>'+\n    '<input type=\"text\" class=\"form-control\" placeholder=\"Input todolist & enter\" v-model=\"todo.name\" v-on:keyup.enter=\"addTodo\">'+\n    '<hr>'+\n    '<ul class=\"list-group\">'+\n    '<todo-item v-for=\"item,index in todos\" v-bind:item=\"item\" v-bind:key=\"index\" ><\u002Ftodo-item>'+\n    '<\u002Ful>'+\n    '<\u002Fdiv>'+\n    '<\u002Fdiv>'+\n    '<\u002Fdiv>',\n    data: function(){\n        return {\n            status: 'all',\n            todo: {\n                name: '',\n                done: false\n            }\n        }\n    },\n    computed: {\n        todos(){\n            return this.$store.state.todos\n        },\n    },\n    methods: {\n        addTodo(){\n        }\n    }\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sekarang coba buka aplikasi todolist di browser, harusnya kamu akan melihat tampilan seperti di bawah ini.\u003C\u002Fp>Rekomendasi:  Kenalan dengan Vuex, Tutorial State Management di Vue Js\u003Cfigure>\u003Cimg alt=\"Tampilan Todolist dari Vuex\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch3>Merubah Event Create Todo, Toggle Todo dan Delete Todo\u003C\u002Fh3>\u003Cp>Karena kita sekarang menggunakan Vuex, jadi untuk melakukan perubahan pada state, harus menggunakan \u003Cem>mutations. \u003C\u002Fem>Buat 3 mutations yaitu \u003Cem>addTodo\u003C\u002Fem>, \u003Cem>toggleTodo\u003C\u002Fem>, dan \u003Cem>deleteTodo\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Edit store dan tambahkan 3 \u003Cem>mutations\u003C\u002Fem> tadi\u003C\u002Fp>\u003Cpre>\u003Ccode>mutations: {\n        addTodo (state,payload) {\n          state.todos.push(payload)\n        },\n        deleteTodo (state,payload) {\n          let index = state.todos.indexOf(payload);\n          state.todos.splice(index)\n        },\n        toggleTodo(state,payload){\n            let index = state.todos.indexOf(payload);\n            state.todos[index].done = !state.todos[index].done\n        }\n      },\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Edit component \u003Cem>todo-item \u003C\u002Fem>dan ubah bagian methodnya dengan memanggil \u003Cem>mutations\u003C\u002Fem> dari \u003Cem>store\u003C\u002Fem>\u003C\u002Fp>\u003Cpre>\u003Ccode>Vue.component('todo-item',{\n    props: ['item'],\n    template: '<li class=\"list-group-item\" v-bind:style=\"isActive\">{{ item.name }}'+\n    '<button type=\"button\" class=\"btn btn-success float-right\" v-on:click=\"toggleTodo\">'+\n    '∨'+\n    '<\u002Fbutton>'+\n    '<button type=\"button\" class=\"btn btn-danger float-right\" aria-label=\"Close\" v-on:click=\"deleteTodo\">'+\n    '<span aria-hidden=\"true\">×<\u002Fspan>'+\n    '<\u002Fbutton>'+\n    '<\u002Fli>',\n    methods: {\n        toggleTodo(){\n            this.$store.commit('toggleTodo',this.item)\n        },\n        deleteTodo(){\n            this.$store.commit('deleteTodo',this.item)\n        }\n    },\n    computed: {\n        isActive(){\n            if(this.item.done){\n                return 'text-decoration:line-through'\n            }\n        }\n    }\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita sudah hampir selesai.\u003C\u002Fp>\u003Cp>Kamu bisa mencobanya sekarang, untuk menambah todo baru, enable & disable todo, maupun menghapus todo.\u003C\u002Fp>\u003Cp>Langkah terkahir adalah saya mau menambahkan fungsi filter untuk menampilkan todolist yang sudah dikerjakan atau belum.\u003C\u002Fp>\u003Cp>Pertama adalah membuat 2 buah getters di store yaitu \u003Cem>doneTodos\u003C\u002Fem> & \u003Cem>pendingTodos\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Edit store dan tambahkan getter di bawah ini\u003C\u002Fp>\u003Cpre>\u003Ccode>getters: {\n        doneTodos(state){\n            return state.todos.filter(function(item){\n                return item.done == true\n            })\n        },\n        pendingTodos(state){\n            return state.todos.filter(function(item){\n                return item.done == false\n            })\n        },\n    },\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita sudah memilik \u003Cem>getters\u003C\u002Fem>, saatnya melakukan filter di component. Buka component todo dan edit bagian template dan bagian computed.\u003C\u002Fp>\u003Cp>Tambahkan beberapa button di template yang akan merubah value dari data \u003Cem>status\u003C\u002Fem>\u003C\u002Fp>\u003Cpre>\u003Ccode>.....\n'<hr>'+\n'<button @click=\"status='all'\">All<\u002Fbutton>'+\n'<button @click=\"status='pending'\">Pending<\u002Fbutton>'+\n'<button @click=\"status='done'\">Done<\u002Fbutton>'+\n'<ul class=\"list-group\">'+\n.....\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Buat sebuah data baru dengan nama status dengan \u003Cem>default value = all. \u003C\u002Fem>\u003C\u002Fp>\u003Cp>Edit bagian computed todos\u003C\u002Fp>\u003Cpre>\u003Ccode>todos(){\n            if(this.status == 'all')\n                return this.$store.state.todos \n            else if(this.status == 'done')\n                return this.$store.getters.doneTodos\n            else if(this.status == 'pending')\n                return this.$store.getters.pendingTodos\n        },\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi saat status berubah menjadi pending atau done, maka todos yang di panggil juga mengikuti apakah todo item tersebut statusnya pending atau done.\u003C\u002Fp>\u003Cp>Nah sekarang saatnya mencoba aplikasi todolist yang sudah kita update sehingga memakai Vuex.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Kesimpulan\u003C\u002Fp>\u003Cp>Jadi apa kesimpulan yang bisa kita ambil setelah mencoba mengimplementasikan Vuex sebagai state management di aplikasi todolist tersebut?\u003C\u002Fp>\u003Cp>1. Data yang terpusat. Jadi karena datanya jadi 1 di dalam store maka lebih mudah untuk memanage dan maintenancenya. \u003C\u002Fp>\u003Cp>2. Semua component bisa mengakses state yang ada dan melakukan perubahan lewat \u003Cem>mutations\u003C\u002Fem>\u003C\u002Fp>\u003Cp>3. Kalian tidak harus menggunakan Vuex jika scope projectnya tidak terlalu besar atau jika hanya dengan menggunakan props atau emit event saja cukup maka Vuex tidak diperlukan. Jika kalian membutuhkan state yang komplek yang harus dan mudah di akses oleh semua component maka Vuex bisa jadi pilihan wajib untuk kamu implementasikan.\u003C\u002Fp>\u003Cp>Terakhir kamu wajib baca-baca lagi dokumentasi Vuex di sini: \u003Ca href=\"https:\u002F\u002Fvuex.vuejs.org\">https:\u002F\u002Fvuex.vuejs.org\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Untuk project ini sudah saya upload di github, bisa di cek sini ya: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyusidabcs\u002Ftodo-vuex\">vuex-todo\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Semoga tutorial kali ini bermanfaat, silakan like & share ya.\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags: State Management Vuejs Vuex","Agus Yusida December 12, 2018 Halo teman ngide! Kali ini kita akan melanjukan belajar tentang vuejs, lebih tepatnya tentang bagaimana mengatur state di dalam ap",[],[],0]