Nuxt.js vuex-persistedstateを使ã£ã¦Local Storageã«ãƒ‡ãƒ¼ã‚¿ã‚’ä¿å˜ã™ã‚‹
Nuxt.js vuex-persistedstateを使ã£ã¦Local Storageã«ãƒ‡ãƒ¼ã‚¿ã‚’ä¿å˜ã™ã‚‹ 作æˆæ—¥ 2019.12.25 æ›´æ–°æ—¥ 2020.07.21 nuxt.js Vuetify Local Storage, nuxt.js, vuex-persistedstate vuex-persistedstateã®ç°¡å˜ãªä½¿ã„æ–¹ã®ã‚µãƒ³ãƒ—ルコードã§ã™ã€‚入力ã—ãŸãƒ†ã‚ストã¨ã‚«ã‚¦ãƒ³ã‚¿ãƒ¼ã«ã‚ˆã‚Šå¢—åŠ ã•ã›ãŸæ•°å€¤ã‚’Local Storageã«ä¿å˜ã—ã¾ã™ã€‚
Nuxt.jsã®Storeã«ã‚ˆã‚‹ãƒ‡ãƒ¼ã‚¿ä¿å˜ [vuex-persistedstate][js-cookie]
Nuxt.jsã«ãŠã„ã¦Store（ストア）を利用ã™ã‚‹ã¨ã€ãƒ‡ãƒ¼ã‚¿ã®çŠ¶æ…‹ç®¡ç†ã‚’ãŠã“ãªã†Vuexã«ã‚ˆã£ã¦ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆé–“ã®ãƒ‡ãƒ¼ã‚¿ã®å—ã‘渡ã—を一元化ã§ãã¾ã™ã€‚本記事ã§ã¯ãã®Storeã¨vuex-persistedstateモジュールを利用ã—ã¦ãƒ‡ãƒ¼ã‚¿ã‚’Local Storage（もã—ãã¯Session Storage）ã«ä¿å˜ã—ã¦ã¿ã¾ã™ã€‚ Storeã«ã¯ã‚¯ãƒ©ã‚·ãƒƒã‚¯ãƒ¢ãƒ¼ãƒ‰ã¨ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ãƒ¢ãƒ¼ãƒ‰ãŒã‚ã‚Šã¾ã™ãŒã€æœ¬è¨˜äº‹ã§ã¯ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ãƒ¢ãƒ¼ãƒ‰ã«ã‚ˆã‚‹è¨˜è¿°ã§èª¬æ˜Žã—ã¦ã„ãã¾ã™ã€‚ï¼’ã¤ã®ãƒ¢ãƒ¼ãƒ‰ã®é•ã„ã«ã¤ã„ã¦ã¯å…¬å¼ã‚µã‚¤ãƒˆã‚’å‚ç…§ã—ã¦ä¸‹ã•ã„。 Nuxt.jsã«ã‚ˆã‚‹ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®ä½œæˆã¯ä¸‹è¨˜ãƒšãƒ¼ã‚¸ã‚’ã”覧下ã•ã„。 Nuxt.js入門 [$route.params][layouts] プãƒã‚¸ã‚§ã‚¯ãƒˆå†…ã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã‚’確èªã—ã¾ã™ã€‚Storeã«ã‚ˆã‚‹æ©Ÿèƒ½ã¯ã€ä¸»ã«ã€Œstoreã€ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªå†…ã«ãƒ•ã‚¡ã‚¤ãƒ«ã‚’è¿½åŠ ã—ã¦ã„ãã“ã¨ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ $ tree
nuxt.jsを使ã†æ™‚ã«localStorageã§storeを永続化ã™ã‚‹ - Qiita
nuxt.jsã§å†èªè¾¼ã—ã¦ã‚‚入力ä¸ã®å†…容をä¿æŒã—ãŸã„ ã¨ã„ã†å‹•æ©Ÿã‹ã‚‰ã€çŠ¶æ…‹ã‚’localstorageã«ä¿å˜ã™ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ 日本語ã§ã®çŸ¥è¦‹ã¯ã‚ã¾ã‚Šãªã‹ã£ãŸã®ã§ã€æŠ•ç¨¿ã—ã¦ãŠãã¾ã™ã€‚ localstorageã«ä¿å˜ãŒå¯èƒ½ã«ãªã‚‹ã¨ã©ã†ãªã‚‹ï¼Ÿ å†èªè¾¼ã—ã¦ã‚‚ã€storeã®çŠ¶æ…‹ã‚’ä¿ã¤ã“ã¨ãŒã§ãã¾ã™ã€‚ 入力ä¸ã®ãƒ•ã‚©ãƒ¼ãƒ ã®å†…容やã€ç”»é¢ã®çŠ¶æ…‹ã‚’復元ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ storeä¸ã®stateã¯localstorageを消ã—去らãªã„ã¨æ–°ã—ã„値ã¨ã‹ã‚’è¿½åŠ ã—ã¦ã‚‚状態ãŒå¤‰ã‚らãªããªã£ã¦ã—ã¾ã„ã¾ã™ã€‚ vuex-persistedstateを使ㆠReduxã§ã‚‚経験ãŒã‚ã‚Šã¾ã™ãŒã€ã“ã†ã„ã†ã¨ãã«ã¯storeãŒå¤‰ã‚ã£ãŸçž¬é–“ã«è‡ªå‹•çš„ã«ä¿å˜ã—ã¦ãã‚Œã¦ã€ãƒšãƒ¼ã‚¸ãŒå§‹ã¾ã£ãŸçž¬é–“ã«å¾©å…ƒã—ã¦ãれるã€ãƒ©ã‚¤ãƒ–ラリを用ã„ã‚‹ã¹ãã§ã™ã€‚ 探ã—ãŸçµæžœã€æœ€çµ‚çš„ã«nuxt.jsã®issueãªã©ã§è¦‹ã‚‹ã“ã¨ã®å¤šã‹ã£ãŸ"vuex-persistedst
Vuex PersistedStateã®å€¤ã®å¾©å¸°ã®ã‚¿ã‚¤ãƒŸãƒ³ã‚°ãŒè¬Žã ã£ãŸã®ã§Nuxtã®plugin書ã„ã¦è§£æ±ºã—ãŸ
背景先日ã‹ã‚‰ Vue (Nuxt) + Vuex + Vuex PersistedSate ã§ãƒ¢ãƒŽã‚’å‹•ã‹ã—ã¦ã‚‹ã‚“ã ã‘ã©ã€ ãªã‚“ã‹ãµã„ã«ãƒ‡ãƒ¼ã‚¿ãŒçŸ›ç›¾ã—ã¦å‹•ä½œãŒãŠã‹ã—ããªã‚‹ ã“ã¨ãŒèµ·ãã¦ã„ãŸã€‚ ã¾ãアタリã¯ã¤ã„ã¦ã„ã¦ã€Nuxtã§routeã«å¿œã˜ã¦Vuex Storeã‚’module分割ã™ã‚‹æ–¹æ³• - ã‚ーã‚ã‚ŠãŒã¡(2018-04-19) ã«ã‚ã‚‹å‹•çš„ã« module æ§‹é€ ã® Vuex Store を生æˆã—ã¦ã„る処ç†ã¨ã€ Vuex PersistedState を通ã˜ã¦ localStorage ã‹ã‚‰ãƒ‡ãƒ¼ã‚¿ãŒè¿”ã£ã¦ãる処ç†ãŒãã‚Œãžã‚Œãƒãƒ©ãƒãƒ©ã«å‹•ã„ã¦ã„ã‚‹ã“ã¨ã§ã€ã€ŒVuex Store ã®å€¤ã‚’見ã¦åˆ¤å®šã™ã‚‹å‡¦ç†ã€ãŒã‚¿ã‚¤ãƒŸãƒ³ã‚°æ¬¡ç¬¬ã®å¾®å¦™ãªã‚·ãƒãƒ¢ãƒŽã«ãªã£ã¦ã„ã‚‹ã‚“ã ã‚ã†ãªãã¨æ€ã£ã¦ãŸã‚“ã ã‘ã©ã€æ±ºå®šçš„ãªè§£æ±ºç–ãŒè¦‹ã¤ã‹ã‚‰ãªã„ã§ã„ãŸã€‚ 通常ã®ä½¿ã„æ–¹ã ã¨å•é¡Œã«ãªã‚‰ãªã„ã‘ã©ãƒ†ã‚¹ãƒˆã—ã¦ã‚‹ã¨ã‚ˆãè¸ã¿æŠœãã®ã§ã€ã”ã¾ã‹ã—ã”ã¾ã‹ã—ã‚„
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}