Reset Vuex State

image from github

Vuex adalah state management yang biasa di pakai pada library frontend vue. Dengan vuex memungkinkan kita untuk menggunakan state secara global pada semua component pada aplikasi kita. Vue adalah sebuah library javascript untuk frontend yang membantu kita untuk membuat Single Page Application (SPA) dengan vue-router, SPA memungkinkan kita dalam membuat aplikasi hanya dengan satu page saja, dengan memanipulasi dom ketika berpindah dari satu halaman ke halaman lain, sehingga kita tidak perlu me-refresh browser atau melakukan server side rendering.

Masalah yang muncul ketika menggunakan vuex pada SPA yang saya alami adalah state vuex tidak kembali pada default value setelah kita berpindah halaman, sehingga seringkali ketika kita kembali pada halaman sebelumnya atau component selanjutnya value state masih bernilai sama dari operasi sebelumnya, hal ini karena kita tidak merefresh atau meload ulang browser karena menggunakan SPA, dan tentu juga karea state pada vuex dapat di akses di semua component. Dari sana bisa jadi menimbulkan bug yang mungkin tidak terprediksi. Untuk itu kita harus membuat semacam mekanisme reset state yang kita bisa akses di manapun saat kita butuhkan.

Sebuah function yang mengembalikan object dengan nilai default state

Function ini kita assign ke dalam variable state yang kita bisa akses di semua component.

const getDefaultState = () => {
  return {
    name: '',
    families: [],
    education: {}
    identity_number: null,
    isFemale: false
  }
}
const state = getDefaultState()

Mutations yang mengembalikan nilai object

Dengan memanfaatkan method Object.assign() yang di sediakan oleh javascript kita akan mengembalikan nilai state pada kondisi default yang sudah kita definisikan pada function getDefaultState().

const mutations = {
  resetState (state) {
    Object.assign(state, getDefaultState())
  }
}

Akses mutations pada lifecycle destroyed

Kita akan mengakses mutations yang telah kita buat pada function destroyed yang di sediakan oleh vue pada lifecycle. Mengenai lifecycle sudah saya jelaskan pada artikel ini.

destroyed () {
  this.$store.commit('resetState')
}

Dengan cara ini kita dapat mengembalikan kondisi state pada kondisi default sesaat setelah kita meninggalkan component tersebut, sehingga pada component selanjutnya ketika kita mengakses state kondisi state sudah di refresh seperti semula.