Vue 11-3 Vuex Project ๋ณด์ถฉ

Seungju Hwangยท2021๋…„ 1์›” 24์ผ
0

Vue

๋ชฉ๋ก ๋ณด๊ธฐ
17/18
post-thumbnail

Intro

์•ž์„œ ๋งŒ๋“  TodoList๋Š” ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด ๊ธฐ๊ป ํ• ์ผ ์ถ”๊ฐ€ํ•ด๋†”๋„ ์‚ฌ๋ผ์ ธ ๋ฒ„๋ ธ์–ด์š”.

vue-persistedstate ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์–ด์š”.


๐Ÿ”ต vue-persistedstate

localstorage๋ฅผ ์ด์šฉํ•˜์—ฌ state๋ฅผ ์œ ์ง€ํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ

๊ฐœ๋…

vuex-persistedstate๋Š” state์— ์ €์žฅ๋”˜ ๋ณ€์ˆ˜์™€ ๊ฐ’์„ ๊ทธ๋Œ€๋กœ ์›น๋ธŒ๋ผ์šฐ์ €์˜ localstorage์— ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค. ์ดํ›„ ๋ Œ๋”๋ง ๋  ๋•Œ localstorage์— ์žˆ๋Š” ๋‚ด์šฉ์„ `state์— ๋‹ค์‹œ ๋™๊ธฐํ™” ์‹œํ‚ต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ,
state์˜ ๋ณ€์ˆ˜๋ฅผ ๋„ˆ๋ฌด ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์˜ ์„ฑ๋Šฅ์ด ๋–จ์–ด์ง€๋Š” ๋‹จ์ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•œ ๋ณ€์ˆ˜๋งŒ ์„ ํƒํ•ด์„œ ์ €์žฅํ•˜๋Š” ๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค.

ํ™œ์šฉ

npm i --save vuex-persistedstate

store/index.js

import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  //...
  
  plugins: [
    createPersistedState(),
  ]
})

์„ ํƒํ•œ ๋ชจ๋“ˆ๋งŒ ์‚ฌ์šฉํ•˜๊ธฐ

import createPersistedState from "vuex-persistedstate"
import moduleName from './moduleName'
Vue.use(Vuex)

export default new Vuex.Store({
  //...
  
  plugins: [
    createPersistedState({
      paths:['moduleName'],
    })
  ]
})

์ถ”๊ฐ€

์ฟ ํ‚ค๋‚˜ ์„ธ์…˜์— ์ €์žฅํ•˜๋Š” ๋ฐฉ์‹๋„ ์žˆ์–ด์š”. ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚œ์ค‘์— ๊ณต๋ถ€ํ•ด๋ณผ๊ฒŒ์š”.


profile
๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€์€ ์‰ฝ๊ฒŒ ๋ฌด๋„ˆ์ง€์ง€ ์•Š์•„์š”.

0๊ฐœ์˜ ๋Œ“๊ธ€