Menggunakan Store Di Vue Js

Bagaimana cara menggunakan global state atau variable dalam vue js.

Kami menyukai Reactjs, tetapi sebenarnya terlalu rumit jika Anda perlu memanggil variabel global.

Jadi bisakah Vue.js membuatnya lebih sederhana dari pada redux? Mari kita lihat bersama!, Sebelum kamu memulai

Pertama, saya ingin Anda memahami dasar-dasar Vue, tetapi Anda perlu tahu cara membuat proyek kosong menggunakan VueCLI. Selanjutnya, Anda perlu memahami struktur dasar proyek Vue Anda: template, skrip, dan CSS.

Konsep dasar

State

Ini sama dengan keadaan Reactjs. Ini adalah variabel global yang menyimpan data yang memengaruhi tampilan situs web Anda.

mutations

Bagian ini mendefinisikan skrip yang mengubah state.

Actions

Semua operasi asinkron harus ada di dalamnya. Contoh: fetch API.

Tambahkan bersama

main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.config.productionTip = false
Vue.use(Vuex)const API_BASE = "http://127.0.0.1:5000/" + 'api/'
const API_FUNCTION_GET_FILES = API_BASE + 'files/'
const API_FUNCTION_UPDATE_FILES = API_BASE + 'update/'const store = new Vuex.Store({
    state: {
        files: undefined,
    },
    mutations: {
        setFiles(state, files) {
            state.files = files
        },
    },
    actions: {
        async getFiles() {
            return fetch(API_FUNCTION_GET_FILES)
                .then((result) => result.json())
                .then((files) => {
                    this.commit('setFiles', files)
                });
        },
        async updateFiles() {
            await fetch(API_FUNCTION_UPDATE_FILES)
            return store.dispatch('getFiles')
        }
    },
})new Vue({
    store,
    render: h => h(App),
    created: () => {
        store.dispatch('getFiles')
    }
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <MyList/>
  </div>
</template><script>
import MyList from "./components/MyList.vue";export default {
  name: "app",
  components: {
    MyList
  },
};
</script>

./components/MyList.vue

<template>
  <div class="hello">
    <button v-on:click="update">update files</button>
    <br />
    {{this.$store.state.files}}
  </div>
</template><script>
export default {
  name: "MyList",
  methods: {
    update() {
      this.$store.dispatch("updateFiles");
    }
  }
};
</script>

Tambahan

Gunakan v-model di vuestore.state.

// Component.vue

<template>
  <input v-model="message">
</template>

<script>
export default {
  computed: {
    message: {
      get() {
        return this.$store.state.message
      },
      set(value) {
        this.$store.commit('updateMessage', value)
      }
    }
  }
};
</script>

Bagaimana cara menyimpan store.state ke localStorage?

Metode 1:

// Retrieving data | getting data from localStorage
const store = new Vuex.Store({
  state: { count: 1 },
  mutations: {
    initialise_store(state) {
      if (localStorage.getItem('store')) {
        this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store'))));
      }
    }
  }, 
});
// Subscribe to store updates | saving data to localStorage
store.subscribe((mutation, state) => {
  localStorage.setItem('store', JSON.stringify(state));
});

Metode2

Ketika berbicara tentang penyimpanan data, ada berbagai cara untuk menyimpan data.

Salah satunya sangat sederhana, sempurna untuk membuat prototipe, dan menggunakan Web Storage API untuk menyimpan data: localStorage dan sessionStorage.

Dengan Vue, Anda dapat menggunakan API itu dalam berbagai cara. Salah satu yang paling sederhana adalah dengan mengandalkan library vuex-persist.

Instal menggunakan npm atau yarn.

npm install vuex-persist

#or
yarn add vuex-persist

Buka file store Vuex dan tambahkan yang berikut ini:

import VuexPersist from 'vuex-persist'

Inisialisasi VuexPersist:

const vuexPersist = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

key adalah kunci yang digunakan oleh database localStorage.

Ubah localStorage menjadi sessionStorage untuk menggunakan sistem penyimpanan lain (masing-masing memiliki karakteristiknya sendiri, lihat dokumentasi Web Storage API yang ditautkan di atas).

Kemudian, ketika Anda menginisialisasi store, tambahkan vuexPersist ke daftar plugin Vuex.

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})

itu dia! Setiap kali store berubah, library menyimpannya di browser.

Ada lebih banyak fitur lanjutan yang dapat Anda temukan di dokumentasi resmi, tetapi ini adalah dasar bagi Anda untuk memulai.