State #part3-vuex

3 min readNov 30, 2017

Kita akan menggunakan vuex pada project vue dan mengimport file store/state.js dengan cara membuka file store/index.js dan tuliskan kode dibawah ini.

// import vue
import Vue from 'vue'// import vuex
import Vuex from 'vuex'// menggunakan vuex pada vue
Vue.use(Vuex)// import state dari file state.js
import state from './state'// export vuex berikut dengan state-nya
export default new Vuex.Store({
  state
})

Dan jangan lupa untuk mengimport store-nya di dalam main.js menjadi seperti berikut :

Jika sudah mari kita beralih ke folder store/state.js, disini kita akan membuat sebuah variabel dengan nama author, yang dapat di lihat pada gambar berikut :

Perlu kita ingat kembali bahwa state berfungsi sebagai tempat untuk menampung data murni yang kita dapat baik dari API, LocalStorage atau lainnya.

Selanjutnya cara memanggil author di dalam components, ada beberapa cara yang dapat dilakukan.

map

untuk menggunakan map kamu harus mengimportnya terlebih dahulu dengan cara :

<script>
  import { mapState } from 'vuex'  export default {
    // code
  }
</script>

lalu kamu dapat menggunakannya di dalam computed dengan cara berikut :

<script>
  import { mapState } from 'vuex'  export default {
   computed : {
      ...mapState([
        'author'
      ])
    }
  }
</script>

dan di dalam template dapat mengetikan ini :

<template lang="html">
  <h1>{{ author }}</h1>
</template>

jika di lihat secara keseluruhan akan seperti ini :

Jika kamu membuka browser dengan mengetikan http://localhost:8080/, maka tampilannya akan seperti berikut :

2. this.$store

Untuk menggunakan this.$store cukup mudah, pertama saya akan menambahkan satu data lagi di dalam store/state.js dengan nama github, dengan begitu state.js akan menjadi seperti berikut :