VueUse
1.5 years of experience createGlobalState
Keep states in the global scope to be reusable across Vue instances.
Vue instance တစ်လျှောက်လုံးမှာ မည်သည့် page ကမဆို ပြန်ပြီးအသုံးပြုလို့ရအောင် global scope ထဲမှာ ထိန်းသိမ်းပေးစေချင်တဲ့အခါမှာ အသုံးပြုတယ်။ Without Persistence (Store in Memory)
လက်ရှိ run ထားတဲ့ အချိန်အတွင်းမှာပဲ data က ရှိနေမယ်။ browser refresh လုပ်လိုက်တဲ့အခါမှာတော့ မူလ အခြေအနေကို ပြန်ရောက်သွားပါမယ်။
Name
import { ref } from 'vue' //no need to import in nuxt project
import { createGlobalState } from '@vueuse/core'
export const userProfileWithoutPersitence = createGlobalState(
() =>{
const profile = ref({
name: ''
})
return profile
}) With Persistence (Store in Localstorage)
Dataကို Web browser ရဲ့ localstorage မှာ သွားပြီးသိမ်းထားပါမယ်။ Dataကို အမြဲတမ်း သိမ်းထားချင်တဲ့အခါမှာ သုံးပါတယ်။ browser refresh, browser reopen လုပ်တဲ့အခါမှာလည်း ကျန်ရှိနေပါမယ်။ browserရဲ့ localstorage ကနေ ဖျက်လိုက်ရင်တော့ မူလdata အခြေအနေကို ပြန်ရောက်သွားပါမယ်။
Name
import { createGlobalState, useStorage } from '@vueuse/core'
export const userProfile = createGlobalState(
() => useStorage('vue-use-locale-storage', {
name: ''
})
)