[{"data":1,"prerenderedAt":1964},["ShallowReactive",2],{"\u002Fpost\u002Fredux-how-to-persist-data":3},{"id":4,"title":5,"body":6,"date":1950,"description":143,"extension":1951,"hidden":1952,"image":1953,"meta":1954,"navigation":160,"path":1955,"seo":1956,"sitemap":1957,"stem":1958,"subtitle":1959,"tags":1960,"__hash__":1963},"posts\u002Fpost\u002Fredux-how-to-persist-data.md","關於數據持久化，以Redux、zustand、vuex、pinia為例",{"type":7,"value":8,"toc":1940},"minimark",[9,13,17,20,30,49,57,77,81,94,97,127,130,133,136,579,584,946,949,952,1179,1182,1500,1503,1522,1930,1933,1936],[10,11,12],"h2",{"id":12},"數據持久化",[14,15,16],"p",{},"關於數據持久基本是前端許多功能實現上必須了解的東西，常見的如 localStorage、sessionStorage、indexedDB，儲存例如一些用戶資料、記憶狀態、版本資訊、不太會變動的數據....",[14,18,19],{},"例如我們重整頁面的時候，我們會不希望",[21,22,23,27],"ul",{},[24,25,26],"li",{},"redux 中的儲存的數據被清空",[24,28,29],{},"client 端已經拿過這些資料的話就不要發請求，不要每次都從 sever 拿資料減少流量",[31,32,33],"blockquote",{},[14,34,35,42,43,48],{},[36,37,41],"a",{"href":38,"rel":39},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest\u002F",[40],"nofollow","TanStack Query","、",[36,44,47],{"href":45,"rel":46},"https:\u002F\u002Fswr.vercel.app\u002F",[40],"SWR","，這兩個 library 也可以達到類似的效果，視你的專案而定。",[14,50,51,52,56],{},"要實現持久化, 最簡單的方法是 google search type ",[53,54,55],"code",{},"套件名稱 persist"," 就能找到相對應的 library 可以使用，而這篇將以 Redux 為例，講解熱門 state mangerment library 如何不使用其他多餘的套件自己控制持久化數據，",[31,58,59],{},[14,60,61,62,42,67,42,72],{},"各套件相對應的 library: ",[36,63,66],{"href":64,"rel":65},"https:\u002F\u002Fgithub.com\u002Frt2zz\u002Fredux-persist",[40],"redux-persist",[36,68,71],{"href":69,"rel":70},"https:\u002F\u002Fgithub.com\u002Fchampionswimmer\u002Fvuex-persist#readme",[40],"vuex-persist",[36,73,76],{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Fprazdevs\u002Fpinia-plugin-persistedstate",[40],"pinia-plugin-persistedstate",[10,78,80],{"id":79},"core","Core",[14,82,83,84,87,88,93],{},"現今熱門的狀態管理套件基本上都能找到",[53,85,86],{},"subscribe","函數，來監聽 state 的變化，甚至如 zustand 都出了 ",[36,89,92],{"href":90,"rel":91},"https:\u002F\u002Fdocs.pmnd.rs\u002Fzustand\u002Fintegrations\u002Fpersisting-store-data",[40],"middleware"," 可以直接使用 persist，相當於內建在裡面。",[14,95,96],{},"以下例子為 React、Vue，常用的狀態管理套件，redux、zustand、vuex、pinia",[21,98,99,106,113,120],{},[24,100,101],{},[36,102,105],{"href":103,"rel":104},"https:\u002F\u002Fredux.js.org\u002Fapi\u002Fstore#subscribelistener",[40],"redux subscribe()",[24,107,108],{},[36,109,112],{"href":110,"rel":111},"https:\u002F\u002Fdocs.pmnd.rs\u002Fzustand\u002Frecipes\u002Frecipes#transient-updates-(for-frequent-state-changes)",[40],"zustand subscribe()",[24,114,115],{},[36,116,119],{"href":117,"rel":118},"https:\u002F\u002Fvuex.vuejs.org\u002Fzh\u002Fapi\u002F#subscribe",[40],"Vuex subscribe()",[24,121,122],{},[36,123,126],{"href":124,"rel":125},"https:\u002F\u002Fpinia.vuejs.org\u002Fcore-concepts\u002Fstate.html#subscribing-to-the-state",[40],"pinia subscribe()",[14,128,129],{},"此篇的核心就是利用 subscribe 的監聽將變動的 state，儲存至 localStorage，然後在初始化 APP 的 create store 的時候再將 localStorage 中的資料拿出來當作初始資料。",[131,132],"hr",{},[14,134,135],{},"這邊我們先寫一個 util 的 function，用來跟 localStorage(依需求選擇使用 localStorage 或是 sessionStorage) 交互",[137,138,144],"pre",{"className":139,"code":140,"language":141,"meta":142,"style":143},"language-js shiki shiki-themes light-plus tokyo-night","\u002F\u002F utils.js\n\n\u002F** 讀取 store\n *\n * @returns {any|undefined}\n *\u002F\nexport const loadState = () => {\n  try {\n    \u002F\u002F localStorage 的 key name 可以自己定義或是由傳入的 arguments 來決定，\n    \u002F\u002F 這邊我以 \"state\" 固定當作 key name\n    const s = localStorage.getItem('state')\n    if (s == null) {\n      return undefined\n    }\n    return JSON.parse(s)\n  } catch (err) {\n    console.warn('load state failed', err)\n    return undefined\n  }\n}\n\n\u002F**\n * 存儲 store\n * @param {object} state\n *\u002F\nexport const saveState = (state) => {\n  try {\n    const s = JSON.stringify(state)\n    localStorage.setItem('state', s)\n  } catch (err) {\n    console.warn('save state failed', err)\n  }\n}\n","js","showLineNumbers","",[53,145,146,155,162,168,174,195,201,231,240,246,252,290,313,323,329,350,366,394,401,407,412,417,423,429,449,454,478,485,507,532,545,569,574],{"__ignoreMap":143},[147,148,151],"span",{"class":149,"line":150},"line",1,[147,152,154],{"class":153},"shM36","\u002F\u002F utils.js\n",[147,156,158],{"class":149,"line":157},2,[147,159,161],{"emptyLinePlaceholder":160},true,"\n",[147,163,165],{"class":149,"line":164},3,[147,166,167],{"class":153},"\u002F** 讀取 store\n",[147,169,171],{"class":149,"line":170},4,[147,172,173],{"class":153}," *\n",[147,175,177,180,184,188,192],{"class":149,"line":176},5,[147,178,179],{"class":153}," * ",[147,181,183],{"class":182},"se7cl","@returns",[147,185,187],{"class":186},"sHKXH"," {",[147,189,191],{"class":190},"s6uJR","any|undefined",[147,193,194],{"class":186},"}\n",[147,196,198],{"class":149,"line":197},6,[147,199,200],{"class":153}," *\u002F\n",[147,202,204,208,212,216,220,224,228],{"class":149,"line":203},7,[147,205,207],{"class":206},"swGrk","export",[147,209,211],{"class":210},"sucPa"," const",[147,213,215],{"class":214},"sjNAT"," loadState",[147,217,219],{"class":218},"s6v6z"," =",[147,221,223],{"class":222},"sNwUV"," ()",[147,225,227],{"class":226},"s5MyL"," =>",[147,229,230],{"class":222}," {\n",[147,232,234,238],{"class":149,"line":233},8,[147,235,237],{"class":236},"swp_B","  try",[147,239,230],{"class":222},[147,241,243],{"class":149,"line":242},9,[147,244,245],{"class":153},"    \u002F\u002F localStorage 的 key name 可以自己定義或是由傳入的 arguments 來決定，\n",[147,247,249],{"class":149,"line":248},10,[147,250,251],{"class":153},"    \u002F\u002F 這邊我以 \"state\" 固定當作 key name\n",[147,253,255,258,262,264,268,271,274,277,281,285,287],{"class":149,"line":254},11,[147,256,257],{"class":210},"    const",[147,259,261],{"class":260},"sq2Xa"," s",[147,263,219],{"class":218},[147,265,267],{"class":266},"sJUHq"," localStorage",[147,269,270],{"class":218},".",[147,272,273],{"class":214},"getItem",[147,275,276],{"class":222},"(",[147,278,280],{"class":279},"sq7Q2","'",[147,282,284],{"class":283},"s58z3","state",[147,286,280],{"class":279},[147,288,289],{"class":222},")\n",[147,291,293,296,299,302,306,310],{"class":149,"line":292},12,[147,294,295],{"class":236},"    if",[147,297,298],{"class":222}," (",[147,300,301],{"class":266},"s",[147,303,305],{"class":304},"sny2E"," ==",[147,307,309],{"class":308},"s0ObY"," null",[147,311,312],{"class":222},") {\n",[147,314,316,320],{"class":149,"line":315},13,[147,317,319],{"class":318},"svvEX","      return",[147,321,322],{"class":308}," undefined\n",[147,324,326],{"class":149,"line":325},14,[147,327,328],{"class":222},"    }\n",[147,330,332,335,339,341,344,346,348],{"class":149,"line":331},15,[147,333,334],{"class":318},"    return",[147,336,338],{"class":337},"s1TMK"," JSON",[147,340,270],{"class":218},[147,342,343],{"class":214},"parse",[147,345,276],{"class":222},[147,347,301],{"class":266},[147,349,289],{"class":222},[147,351,353,356,359,361,364],{"class":149,"line":352},16,[147,354,355],{"class":222},"  } ",[147,357,358],{"class":236},"catch",[147,360,298],{"class":222},[147,362,363],{"class":266},"err",[147,365,312],{"class":222},[147,367,369,372,374,377,379,381,384,386,389,392],{"class":149,"line":368},17,[147,370,371],{"class":266},"    console",[147,373,270],{"class":218},[147,375,376],{"class":214},"warn",[147,378,276],{"class":222},[147,380,280],{"class":279},[147,382,383],{"class":283},"load state failed",[147,385,280],{"class":279},[147,387,388],{"class":218},",",[147,390,391],{"class":266}," err",[147,393,289],{"class":222},[147,395,397,399],{"class":149,"line":396},18,[147,398,334],{"class":318},[147,400,322],{"class":308},[147,402,404],{"class":149,"line":403},19,[147,405,406],{"class":222},"  }\n",[147,408,410],{"class":149,"line":409},20,[147,411,194],{"class":222},[147,413,415],{"class":149,"line":414},21,[147,416,161],{"emptyLinePlaceholder":160},[147,418,420],{"class":149,"line":419},22,[147,421,422],{"class":153},"\u002F**\n",[147,424,426],{"class":149,"line":425},23,[147,427,428],{"class":153}," * 存儲 store\n",[147,430,432,434,437,439,442,445],{"class":149,"line":431},24,[147,433,179],{"class":153},[147,435,436],{"class":182},"@param",[147,438,187],{"class":186},[147,440,441],{"class":190},"object",[147,443,444],{"class":186},"}",[147,446,448],{"class":447},"sWJqL"," state\n",[147,450,452],{"class":149,"line":451},25,[147,453,200],{"class":153},[147,455,457,459,461,464,466,468,471,474,476],{"class":149,"line":456},26,[147,458,207],{"class":206},[147,460,211],{"class":210},[147,462,463],{"class":214}," saveState",[147,465,219],{"class":218},[147,467,298],{"class":222},[147,469,284],{"class":470},"s_ePm",[147,472,473],{"class":222},")",[147,475,227],{"class":226},[147,477,230],{"class":222},[147,479,481,483],{"class":149,"line":480},27,[147,482,237],{"class":236},[147,484,230],{"class":222},[147,486,488,490,492,494,496,498,501,503,505],{"class":149,"line":487},28,[147,489,257],{"class":210},[147,491,261],{"class":260},[147,493,219],{"class":218},[147,495,338],{"class":337},[147,497,270],{"class":218},[147,499,500],{"class":214},"stringify",[147,502,276],{"class":222},[147,504,284],{"class":266},[147,506,289],{"class":222},[147,508,510,513,515,518,520,522,524,526,528,530],{"class":149,"line":509},29,[147,511,512],{"class":266},"    localStorage",[147,514,270],{"class":218},[147,516,517],{"class":214},"setItem",[147,519,276],{"class":222},[147,521,280],{"class":279},[147,523,284],{"class":283},[147,525,280],{"class":279},[147,527,388],{"class":218},[147,529,261],{"class":266},[147,531,289],{"class":222},[147,533,535,537,539,541,543],{"class":149,"line":534},30,[147,536,355],{"class":222},[147,538,358],{"class":236},[147,540,298],{"class":222},[147,542,363],{"class":266},[147,544,312],{"class":222},[147,546,548,550,552,554,556,558,561,563,565,567],{"class":149,"line":547},31,[147,549,371],{"class":266},[147,551,270],{"class":218},[147,553,376],{"class":214},[147,555,276],{"class":222},[147,557,280],{"class":279},[147,559,560],{"class":283},"save state failed",[147,562,280],{"class":279},[147,564,388],{"class":218},[147,566,391],{"class":266},[147,568,289],{"class":222},[147,570,572],{"class":149,"line":571},32,[147,573,406],{"class":222},[147,575,577],{"class":149,"line":576},33,[147,578,194],{"class":222},[580,581,583],"h3",{"id":582},"redux","Redux",[137,585,587],{"className":139,"code":586,"language":141,"meta":142,"style":143},"\u002F\u002F store.js\n\nimport { loadState, saveState } from '@\u002Futils'\nimport { configureStore } from '@reduxjs\u002Ftoolkit'\nimport { combineReducers } from 'redux'\n\n\u002F\u002F Slice\nimport siteReducer from '.\u002Fslice\u002Fsite'\nimport todoReducer from '.\u002Fslice\u002Ftodo'\n\nconst reducer = combineReducers({\n  todo: todoReducer,\n  site: siteReducer,\n})\n\n\u002F\u002F 從 localStorage 拿取上次儲存的資料\nconst preloadedState = loadState()\n\nconst store = configureStore({\n  reducer,\n  devTools: process.env.NODE_ENV !== 'production',\n  preloadedState,\n})\n\nstore.subscribe(() => {\n  \u002F\u002F 第一種寫法： 儲存所有的 state\n  const state = store.getState()\n  saveState(state)\n\n  \u002F\u002F 第二種寫法： 只想儲存某些 reducer (or slice)\n  \u002F\u002F const { site } = store.getState()\n  \u002F\u002F saveState({ site })\n})\n\nexport default store\n",[53,588,589,594,598,629,649,668,672,677,693,709,713,729,744,755,760,764,769,783,787,801,808,841,848,852,856,872,877,896,907,911,916,921,926,930,935],{"__ignoreMap":143},[147,590,591],{"class":149,"line":150},[147,592,593],{"class":153},"\u002F\u002F store.js\n",[147,595,596],{"class":149,"line":157},[147,597,161],{"emptyLinePlaceholder":160},[147,599,600,603,606,610,612,614,617,620,623,626],{"class":149,"line":164},[147,601,602],{"class":206},"import",[147,604,605],{"class":222}," { ",[147,607,609],{"class":608},"sTOFy","loadState",[147,611,388],{"class":218},[147,613,463],{"class":608},[147,615,616],{"class":222}," }",[147,618,619],{"class":206}," from",[147,621,622],{"class":279}," '",[147,624,625],{"class":283},"@\u002Futils",[147,627,628],{"class":279},"'\n",[147,630,631,633,635,638,640,642,644,647],{"class":149,"line":170},[147,632,602],{"class":206},[147,634,605],{"class":222},[147,636,637],{"class":608},"configureStore",[147,639,616],{"class":222},[147,641,619],{"class":206},[147,643,622],{"class":279},[147,645,646],{"class":283},"@reduxjs\u002Ftoolkit",[147,648,628],{"class":279},[147,650,651,653,655,658,660,662,664,666],{"class":149,"line":176},[147,652,602],{"class":206},[147,654,605],{"class":222},[147,656,657],{"class":608},"combineReducers",[147,659,616],{"class":222},[147,661,619],{"class":206},[147,663,622],{"class":279},[147,665,582],{"class":283},[147,667,628],{"class":279},[147,669,670],{"class":149,"line":197},[147,671,161],{"emptyLinePlaceholder":160},[147,673,674],{"class":149,"line":203},[147,675,676],{"class":153},"\u002F\u002F Slice\n",[147,678,679,681,684,686,688,691],{"class":149,"line":233},[147,680,602],{"class":206},[147,682,683],{"class":608}," siteReducer",[147,685,619],{"class":206},[147,687,622],{"class":279},[147,689,690],{"class":283},".\u002Fslice\u002Fsite",[147,692,628],{"class":279},[147,694,695,697,700,702,704,707],{"class":149,"line":242},[147,696,602],{"class":206},[147,698,699],{"class":608}," todoReducer",[147,701,619],{"class":206},[147,703,622],{"class":279},[147,705,706],{"class":283},".\u002Fslice\u002Ftodo",[147,708,628],{"class":279},[147,710,711],{"class":149,"line":248},[147,712,161],{"emptyLinePlaceholder":160},[147,714,715,718,721,723,726],{"class":149,"line":254},[147,716,717],{"class":210},"const",[147,719,720],{"class":260}," reducer",[147,722,219],{"class":218},[147,724,725],{"class":214}," combineReducers",[147,727,728],{"class":222},"({\n",[147,730,731,735,739,741],{"class":149,"line":292},[147,732,734],{"class":733},"sF_0_","  todo",[147,736,738],{"class":737},"s4YYt",":",[147,740,699],{"class":266},[147,742,743],{"class":218},",\n",[147,745,746,749,751,753],{"class":149,"line":315},[147,747,748],{"class":733},"  site",[147,750,738],{"class":737},[147,752,683],{"class":266},[147,754,743],{"class":218},[147,756,757],{"class":149,"line":325},[147,758,759],{"class":222},"})\n",[147,761,762],{"class":149,"line":331},[147,763,161],{"emptyLinePlaceholder":160},[147,765,766],{"class":149,"line":352},[147,767,768],{"class":153},"\u002F\u002F 從 localStorage 拿取上次儲存的資料\n",[147,770,771,773,776,778,780],{"class":149,"line":368},[147,772,717],{"class":210},[147,774,775],{"class":260}," preloadedState",[147,777,219],{"class":218},[147,779,215],{"class":214},[147,781,782],{"class":222},"()\n",[147,784,785],{"class":149,"line":396},[147,786,161],{"emptyLinePlaceholder":160},[147,788,789,791,794,796,799],{"class":149,"line":403},[147,790,717],{"class":210},[147,792,793],{"class":260}," store",[147,795,219],{"class":218},[147,797,798],{"class":214}," configureStore",[147,800,728],{"class":222},[147,802,803,806],{"class":149,"line":409},[147,804,805],{"class":266},"  reducer",[147,807,743],{"class":218},[147,809,810,813,815,818,820,823,825,829,832,834,837,839],{"class":149,"line":414},[147,811,812],{"class":733},"  devTools",[147,814,738],{"class":737},[147,816,817],{"class":266}," process",[147,819,270],{"class":218},[147,821,822],{"class":266},"env",[147,824,270],{"class":218},[147,826,828],{"class":827},"sEHUx","NODE_ENV",[147,830,831],{"class":304}," !==",[147,833,622],{"class":279},[147,835,836],{"class":283},"production",[147,838,280],{"class":279},[147,840,743],{"class":218},[147,842,843,846],{"class":149,"line":419},[147,844,845],{"class":266},"  preloadedState",[147,847,743],{"class":218},[147,849,850],{"class":149,"line":425},[147,851,759],{"class":222},[147,853,854],{"class":149,"line":431},[147,855,161],{"emptyLinePlaceholder":160},[147,857,858,861,863,865,868,870],{"class":149,"line":451},[147,859,860],{"class":266},"store",[147,862,270],{"class":218},[147,864,86],{"class":214},[147,866,867],{"class":222},"(()",[147,869,227],{"class":226},[147,871,230],{"class":222},[147,873,874],{"class":149,"line":456},[147,875,876],{"class":153},"  \u002F\u002F 第一種寫法： 儲存所有的 state\n",[147,878,879,882,885,887,889,891,894],{"class":149,"line":480},[147,880,881],{"class":210},"  const",[147,883,884],{"class":260}," state",[147,886,219],{"class":218},[147,888,793],{"class":266},[147,890,270],{"class":218},[147,892,893],{"class":214},"getState",[147,895,782],{"class":222},[147,897,898,901,903,905],{"class":149,"line":487},[147,899,900],{"class":214},"  saveState",[147,902,276],{"class":222},[147,904,284],{"class":266},[147,906,289],{"class":222},[147,908,909],{"class":149,"line":509},[147,910,161],{"emptyLinePlaceholder":160},[147,912,913],{"class":149,"line":534},[147,914,915],{"class":153},"  \u002F\u002F 第二種寫法： 只想儲存某些 reducer (or slice)\n",[147,917,918],{"class":149,"line":547},[147,919,920],{"class":153},"  \u002F\u002F const { site } = store.getState()\n",[147,922,923],{"class":149,"line":571},[147,924,925],{"class":153},"  \u002F\u002F saveState({ site })\n",[147,927,928],{"class":149,"line":576},[147,929,759],{"class":222},[147,931,933],{"class":149,"line":932},34,[147,934,161],{"emptyLinePlaceholder":160},[147,936,938,940,943],{"class":149,"line":937},35,[147,939,207],{"class":206},[147,941,942],{"class":206}," default",[147,944,945],{"class":266}," store\n",[580,947,948],{"id":948},"zustand",[14,950,951],{},"因為本身就有提供 persist 的 middleware 了，所以這邊我們直接拿官方的例子來用",[137,953,955],{"className":139,"code":954,"language":141,"meta":142,"style":143},"\u002F\u002F https:\u002F\u002Fdocs.pmnd.rs\u002Fzustand\u002Fintegrations\u002Fpersisting-store-data\nimport { create } from 'zustand'\nimport { createJSONStorage, persist } from 'zustand\u002Fmiddleware'\n\nexport const useBearStore = create(\n  persist(\n    (set, get) => ({\n      bears: 0,\n      addABear: () => set({ bears: get().bears + 1 }),\n    }),\n    {\n      name: 'food-storage', \u002F\u002F name of the item in the storage (must be unique)\n      storage: createJSONStorage(() => sessionStorage), \u002F\u002F (optional) by default, 'localStorage' is used\n    }\n  )\n)\n",[53,956,957,962,981,1006,1010,1027,1034,1054,1067,1111,1118,1123,1142,1166,1170,1175],{"__ignoreMap":143},[147,958,959],{"class":149,"line":150},[147,960,961],{"class":153},"\u002F\u002F https:\u002F\u002Fdocs.pmnd.rs\u002Fzustand\u002Fintegrations\u002Fpersisting-store-data\n",[147,963,964,966,968,971,973,975,977,979],{"class":149,"line":157},[147,965,602],{"class":206},[147,967,605],{"class":222},[147,969,970],{"class":608},"create",[147,972,616],{"class":222},[147,974,619],{"class":206},[147,976,622],{"class":279},[147,978,948],{"class":283},[147,980,628],{"class":279},[147,982,983,985,987,990,992,995,997,999,1001,1004],{"class":149,"line":164},[147,984,602],{"class":206},[147,986,605],{"class":222},[147,988,989],{"class":608},"createJSONStorage",[147,991,388],{"class":218},[147,993,994],{"class":608}," persist",[147,996,616],{"class":222},[147,998,619],{"class":206},[147,1000,622],{"class":279},[147,1002,1003],{"class":283},"zustand\u002Fmiddleware",[147,1005,628],{"class":279},[147,1007,1008],{"class":149,"line":170},[147,1009,161],{"emptyLinePlaceholder":160},[147,1011,1012,1014,1016,1019,1021,1024],{"class":149,"line":176},[147,1013,207],{"class":206},[147,1015,211],{"class":210},[147,1017,1018],{"class":260}," useBearStore",[147,1020,219],{"class":218},[147,1022,1023],{"class":214}," create",[147,1025,1026],{"class":222},"(\n",[147,1028,1029,1032],{"class":149,"line":197},[147,1030,1031],{"class":214},"  persist",[147,1033,1026],{"class":222},[147,1035,1036,1039,1042,1044,1047,1049,1051],{"class":149,"line":203},[147,1037,1038],{"class":222},"    (",[147,1040,1041],{"class":470},"set",[147,1043,388],{"class":218},[147,1045,1046],{"class":470}," get",[147,1048,473],{"class":222},[147,1050,227],{"class":226},[147,1052,1053],{"class":222}," ({\n",[147,1055,1056,1059,1061,1065],{"class":149,"line":233},[147,1057,1058],{"class":733},"      bears",[147,1060,738],{"class":737},[147,1062,1064],{"class":1063},"sjYsg"," 0",[147,1066,743],{"class":218},[147,1068,1069,1072,1074,1076,1078,1081,1084,1087,1089,1091,1094,1096,1100,1103,1106,1109],{"class":149,"line":242},[147,1070,1071],{"class":214},"      addABear",[147,1073,738],{"class":737},[147,1075,223],{"class":222},[147,1077,227],{"class":226},[147,1079,1080],{"class":214}," set",[147,1082,1083],{"class":222},"({",[147,1085,1086],{"class":733}," bears",[147,1088,738],{"class":737},[147,1090,1046],{"class":214},[147,1092,1093],{"class":222},"()",[147,1095,270],{"class":218},[147,1097,1099],{"class":1098},"se0OL","bears",[147,1101,1102],{"class":218}," +",[147,1104,1105],{"class":1063}," 1",[147,1107,1108],{"class":222}," })",[147,1110,743],{"class":218},[147,1112,1113,1116],{"class":149,"line":248},[147,1114,1115],{"class":222},"    })",[147,1117,743],{"class":218},[147,1119,1120],{"class":149,"line":254},[147,1121,1122],{"class":222},"    {\n",[147,1124,1125,1128,1130,1132,1135,1137,1139],{"class":149,"line":292},[147,1126,1127],{"class":733},"      name",[147,1129,738],{"class":737},[147,1131,622],{"class":279},[147,1133,1134],{"class":283},"food-storage",[147,1136,280],{"class":279},[147,1138,388],{"class":218},[147,1140,1141],{"class":153}," \u002F\u002F name of the item in the storage (must be unique)\n",[147,1143,1144,1147,1149,1152,1154,1156,1159,1161,1163],{"class":149,"line":315},[147,1145,1146],{"class":733},"      storage",[147,1148,738],{"class":737},[147,1150,1151],{"class":214}," createJSONStorage",[147,1153,867],{"class":222},[147,1155,227],{"class":226},[147,1157,1158],{"class":266}," sessionStorage",[147,1160,473],{"class":222},[147,1162,388],{"class":218},[147,1164,1165],{"class":153}," \u002F\u002F (optional) by default, 'localStorage' is used\n",[147,1167,1168],{"class":149,"line":325},[147,1169,328],{"class":222},[147,1171,1172],{"class":149,"line":331},[147,1173,1174],{"class":222},"  )\n",[147,1176,1177],{"class":149,"line":352},[147,1178,289],{"class":222},[580,1180,1181],{"id":1181},"vuex",[137,1183,1185],{"className":139,"code":1184,"language":141,"meta":142,"style":143},"\u002F\u002F store.js\n\u002F\u002F vue^2.6.14 + vuex 3.6.2\n\nimport { loadState, saveState } from '@\u002Futils'\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n  state: {\n    count: 0,\n  },\n  mutations: {\n    increment(state) {\n      state.count++\n    },\n  },\n})\n\nif (localStorage.getItem('state')) {\n  store.replaceState({ ...store.state, ...loadState() })\n}\n\nstore.subscribe((_mutation, state) => {\n  saveState(state)\n})\n\nexport default store\n",[53,1186,1187,1191,1196,1200,1222,1238,1253,1257,1274,1278,1299,1308,1319,1326,1335,1348,1361,1368,1374,1378,1382,1409,1442,1446,1450,1474,1484,1488,1492],{"__ignoreMap":143},[147,1188,1189],{"class":149,"line":150},[147,1190,593],{"class":153},[147,1192,1193],{"class":149,"line":157},[147,1194,1195],{"class":153},"\u002F\u002F vue^2.6.14 + vuex 3.6.2\n",[147,1197,1198],{"class":149,"line":164},[147,1199,161],{"emptyLinePlaceholder":160},[147,1201,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220],{"class":149,"line":170},[147,1203,602],{"class":206},[147,1205,605],{"class":222},[147,1207,609],{"class":608},[147,1209,388],{"class":218},[147,1211,463],{"class":608},[147,1213,616],{"class":222},[147,1215,619],{"class":206},[147,1217,622],{"class":279},[147,1219,625],{"class":283},[147,1221,628],{"class":279},[147,1223,1224,1226,1229,1231,1233,1236],{"class":149,"line":176},[147,1225,602],{"class":206},[147,1227,1228],{"class":608}," Vue",[147,1230,619],{"class":206},[147,1232,622],{"class":279},[147,1234,1235],{"class":283},"vue",[147,1237,628],{"class":279},[147,1239,1240,1242,1245,1247,1249,1251],{"class":149,"line":197},[147,1241,602],{"class":206},[147,1243,1244],{"class":608}," Vuex",[147,1246,619],{"class":206},[147,1248,622],{"class":279},[147,1250,1181],{"class":283},[147,1252,628],{"class":279},[147,1254,1255],{"class":149,"line":203},[147,1256,161],{"emptyLinePlaceholder":160},[147,1258,1259,1262,1264,1267,1269,1272],{"class":149,"line":233},[147,1260,1261],{"class":266},"Vue",[147,1263,270],{"class":218},[147,1265,1266],{"class":214},"use",[147,1268,276],{"class":222},[147,1270,1271],{"class":266},"Vuex",[147,1273,289],{"class":222},[147,1275,1276],{"class":149,"line":242},[147,1277,161],{"emptyLinePlaceholder":160},[147,1279,1280,1282,1284,1286,1290,1292,1294,1297],{"class":149,"line":248},[147,1281,717],{"class":210},[147,1283,793],{"class":260},[147,1285,219],{"class":218},[147,1287,1289],{"class":1288},"s00W4"," new",[147,1291,1244],{"class":266},[147,1293,270],{"class":218},[147,1295,1296],{"class":214},"Store",[147,1298,728],{"class":222},[147,1300,1301,1304,1306],{"class":149,"line":254},[147,1302,1303],{"class":733},"  state",[147,1305,738],{"class":737},[147,1307,230],{"class":222},[147,1309,1310,1313,1315,1317],{"class":149,"line":292},[147,1311,1312],{"class":733},"    count",[147,1314,738],{"class":737},[147,1316,1064],{"class":1063},[147,1318,743],{"class":218},[147,1320,1321,1324],{"class":149,"line":315},[147,1322,1323],{"class":222},"  }",[147,1325,743],{"class":218},[147,1327,1328,1331,1333],{"class":149,"line":325},[147,1329,1330],{"class":733},"  mutations",[147,1332,738],{"class":737},[147,1334,230],{"class":222},[147,1336,1337,1340,1342,1344,1346],{"class":149,"line":331},[147,1338,1339],{"class":214},"    increment",[147,1341,276],{"class":222},[147,1343,284],{"class":470},[147,1345,473],{"class":222},[147,1347,230],{"class":222},[147,1349,1350,1353,1355,1358],{"class":149,"line":352},[147,1351,1352],{"class":266},"      state",[147,1354,270],{"class":218},[147,1356,1357],{"class":1098},"count",[147,1359,1360],{"class":218},"++\n",[147,1362,1363,1366],{"class":149,"line":368},[147,1364,1365],{"class":222},"    }",[147,1367,743],{"class":218},[147,1369,1370,1372],{"class":149,"line":396},[147,1371,1323],{"class":222},[147,1373,743],{"class":218},[147,1375,1376],{"class":149,"line":403},[147,1377,759],{"class":222},[147,1379,1380],{"class":149,"line":409},[147,1381,161],{"emptyLinePlaceholder":160},[147,1383,1384,1387,1389,1392,1394,1396,1398,1400,1402,1404,1407],{"class":149,"line":414},[147,1385,1386],{"class":236},"if",[147,1388,298],{"class":222},[147,1390,1391],{"class":266},"localStorage",[147,1393,270],{"class":218},[147,1395,273],{"class":214},[147,1397,276],{"class":222},[147,1399,280],{"class":279},[147,1401,284],{"class":283},[147,1403,280],{"class":279},[147,1405,1406],{"class":222},"))",[147,1408,230],{"class":222},[147,1410,1411,1414,1416,1419,1422,1426,1428,1430,1432,1434,1437,1439],{"class":149,"line":419},[147,1412,1413],{"class":266},"  store",[147,1415,270],{"class":218},[147,1417,1418],{"class":214},"replaceState",[147,1420,1421],{"class":222},"({ ",[147,1423,1425],{"class":1424},"sk53b","...",[147,1427,860],{"class":266},[147,1429,270],{"class":218},[147,1431,284],{"class":1098},[147,1433,388],{"class":218},[147,1435,1436],{"class":1424}," ...",[147,1438,609],{"class":214},[147,1440,1441],{"class":222},"() })\n",[147,1443,1444],{"class":149,"line":425},[147,1445,194],{"class":222},[147,1447,1448],{"class":149,"line":431},[147,1449,161],{"emptyLinePlaceholder":160},[147,1451,1452,1454,1456,1458,1461,1464,1466,1468,1470,1472],{"class":149,"line":451},[147,1453,860],{"class":266},[147,1455,270],{"class":218},[147,1457,86],{"class":214},[147,1459,1460],{"class":222},"((",[147,1462,1463],{"class":470},"_mutation",[147,1465,388],{"class":218},[147,1467,884],{"class":470},[147,1469,473],{"class":222},[147,1471,227],{"class":226},[147,1473,230],{"class":222},[147,1475,1476,1478,1480,1482],{"class":149,"line":456},[147,1477,900],{"class":214},[147,1479,276],{"class":222},[147,1481,284],{"class":266},[147,1483,289],{"class":222},[147,1485,1486],{"class":149,"line":480},[147,1487,759],{"class":222},[147,1489,1490],{"class":149,"line":487},[147,1491,161],{"emptyLinePlaceholder":160},[147,1493,1494,1496,1498],{"class":149,"line":509},[147,1495,207],{"class":206},[147,1497,942],{"class":206},[147,1499,945],{"class":266},[580,1501,1502],{"id":1502},"pinia",[21,1504,1505,1514],{},[24,1506,1507,1508,1513],{},"利用 ",[36,1509,1512],{"href":1510,"rel":1511},"https:\u002F\u002Fpinia.vuejs.org\u002Fzh\u002Fcore-concepts\u002Fstate.html#mutating-the-state",[40],"$patch"," 將已儲存的資料塞回去 state",[24,1515,1507,1516,1521],{},[36,1517,1520],{"href":1518,"rel":1519},"https:\u002F\u002Fpinia.vuejs.org\u002Fzh\u002Fcore-concepts\u002Fstate.html#subscribing-to-the-state",[40],"$subscribe"," 來監聽 state 的最新狀態並保存在 localStorage 裡",[137,1523,1525],{"className":139,"code":1524,"language":141,"meta":142,"style":143},"\u002F\u002F store\u002Fcount.ts\n\u002F\u002F vue^3.3.2 + pinia^2.0.36\n\nimport { loadState, saveState } from '@\u002Futils'\nimport { defineStore, getActivePinia } from 'pinia'\nimport { computed, ref } from 'vue'\n\nexport const useCounterStore = defineStore('counter', () => {\n  const count = ref(0)\n  const doubleCount = computed(() => count.value * 2)\n  function increment() {\n    count.value++\n  }\n\n  return { count, doubleCount, increment }\n})\n\nconst subscribeToStore = async () => {\n  \u002F\u002F 當 pinia 初始化後才開始工作\n  while (!getActivePinia()) {\n    await new Promise((resolve) => requestAnimationFrame(resolve))\n  }\n\n  useCounterStore().$patch(loadState())\n\n  useCounterStore().$subscribe((mutation, state) => {\n    console.log({ mutation, state })\n    saveState(state)\n  })\n}\n\nsubscribeToStore()\n",[53,1526,1527,1532,1537,1541,1563,1587,1611,1615,1646,1664,1697,1708,1718,1722,1726,1746,1750,1754,1772,1777,1793,1824,1828,1832,1850,1854,1879,1899,1910,1915,1919,1923],{"__ignoreMap":143},[147,1528,1529],{"class":149,"line":150},[147,1530,1531],{"class":153},"\u002F\u002F store\u002Fcount.ts\n",[147,1533,1534],{"class":149,"line":157},[147,1535,1536],{"class":153},"\u002F\u002F vue^3.3.2 + pinia^2.0.36\n",[147,1538,1539],{"class":149,"line":164},[147,1540,161],{"emptyLinePlaceholder":160},[147,1542,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561],{"class":149,"line":170},[147,1544,602],{"class":206},[147,1546,605],{"class":222},[147,1548,609],{"class":608},[147,1550,388],{"class":218},[147,1552,463],{"class":608},[147,1554,616],{"class":222},[147,1556,619],{"class":206},[147,1558,622],{"class":279},[147,1560,625],{"class":283},[147,1562,628],{"class":279},[147,1564,1565,1567,1569,1572,1574,1577,1579,1581,1583,1585],{"class":149,"line":176},[147,1566,602],{"class":206},[147,1568,605],{"class":222},[147,1570,1571],{"class":608},"defineStore",[147,1573,388],{"class":218},[147,1575,1576],{"class":608}," getActivePinia",[147,1578,616],{"class":222},[147,1580,619],{"class":206},[147,1582,622],{"class":279},[147,1584,1502],{"class":283},[147,1586,628],{"class":279},[147,1588,1589,1591,1593,1596,1598,1601,1603,1605,1607,1609],{"class":149,"line":197},[147,1590,602],{"class":206},[147,1592,605],{"class":222},[147,1594,1595],{"class":608},"computed",[147,1597,388],{"class":218},[147,1599,1600],{"class":608}," ref",[147,1602,616],{"class":222},[147,1604,619],{"class":206},[147,1606,622],{"class":279},[147,1608,1235],{"class":283},[147,1610,628],{"class":279},[147,1612,1613],{"class":149,"line":203},[147,1614,161],{"emptyLinePlaceholder":160},[147,1616,1617,1619,1621,1624,1626,1629,1631,1633,1636,1638,1640,1642,1644],{"class":149,"line":233},[147,1618,207],{"class":206},[147,1620,211],{"class":210},[147,1622,1623],{"class":260}," useCounterStore",[147,1625,219],{"class":218},[147,1627,1628],{"class":214}," defineStore",[147,1630,276],{"class":222},[147,1632,280],{"class":279},[147,1634,1635],{"class":283},"counter",[147,1637,280],{"class":279},[147,1639,388],{"class":218},[147,1641,223],{"class":222},[147,1643,227],{"class":226},[147,1645,230],{"class":222},[147,1647,1648,1650,1653,1655,1657,1659,1662],{"class":149,"line":242},[147,1649,881],{"class":210},[147,1651,1652],{"class":260}," count",[147,1654,219],{"class":218},[147,1656,1600],{"class":214},[147,1658,276],{"class":222},[147,1660,1661],{"class":1063},"0",[147,1663,289],{"class":222},[147,1665,1666,1668,1671,1673,1676,1679,1682,1684,1686,1689,1692,1695],{"class":149,"line":248},[147,1667,881],{"class":210},[147,1669,1670],{"class":260}," doubleCount",[147,1672,219],{"class":218},[147,1674,1675],{"class":214}," computed",[147,1677,1678],{"class":222},"(() ",[147,1680,1681],{"class":226},"=>",[147,1683,1652],{"class":266},[147,1685,270],{"class":218},[147,1687,1688],{"class":1098},"value",[147,1690,1691],{"class":218}," *",[147,1693,1694],{"class":1063}," 2",[147,1696,289],{"class":222},[147,1698,1699,1702,1705],{"class":149,"line":254},[147,1700,1701],{"class":226},"  function",[147,1703,1704],{"class":214}," increment",[147,1706,1707],{"class":222},"() {\n",[147,1709,1710,1712,1714,1716],{"class":149,"line":292},[147,1711,1312],{"class":266},[147,1713,270],{"class":218},[147,1715,1688],{"class":1098},[147,1717,1360],{"class":218},[147,1719,1720],{"class":149,"line":315},[147,1721,406],{"class":222},[147,1723,1724],{"class":149,"line":325},[147,1725,161],{"emptyLinePlaceholder":160},[147,1727,1728,1731,1733,1735,1737,1739,1741,1743],{"class":149,"line":331},[147,1729,1730],{"class":318},"  return",[147,1732,605],{"class":222},[147,1734,1357],{"class":266},[147,1736,388],{"class":218},[147,1738,1670],{"class":266},[147,1740,388],{"class":218},[147,1742,1704],{"class":266},[147,1744,1745],{"class":222}," }\n",[147,1747,1748],{"class":149,"line":352},[147,1749,759],{"class":222},[147,1751,1752],{"class":149,"line":368},[147,1753,161],{"emptyLinePlaceholder":160},[147,1755,1756,1758,1761,1763,1766,1768,1770],{"class":149,"line":396},[147,1757,717],{"class":210},[147,1759,1760],{"class":214}," subscribeToStore",[147,1762,219],{"class":218},[147,1764,1765],{"class":210}," async",[147,1767,223],{"class":222},[147,1769,227],{"class":226},[147,1771,230],{"class":222},[147,1773,1774],{"class":149,"line":403},[147,1775,1776],{"class":153},"  \u002F\u002F 當 pinia 初始化後才開始工作\n",[147,1778,1779,1782,1784,1787,1790],{"class":149,"line":409},[147,1780,1781],{"class":236},"  while",[147,1783,298],{"class":222},[147,1785,1786],{"class":304},"!",[147,1788,1789],{"class":214},"getActivePinia",[147,1791,1792],{"class":222},"()) {\n",[147,1794,1795,1798,1800,1804,1806,1809,1812,1814,1817,1819,1821],{"class":149,"line":414},[147,1796,1797],{"class":318},"    await",[147,1799,1289],{"class":1288},[147,1801,1803],{"class":1802},"sX0bS"," Promise",[147,1805,1460],{"class":222},[147,1807,1808],{"class":470},"resolve",[147,1810,1811],{"class":222},") ",[147,1813,1681],{"class":226},[147,1815,1816],{"class":214}," requestAnimationFrame",[147,1818,276],{"class":222},[147,1820,1808],{"class":266},[147,1822,1823],{"class":222},"))\n",[147,1825,1826],{"class":149,"line":419},[147,1827,406],{"class":222},[147,1829,1830],{"class":149,"line":425},[147,1831,161],{"emptyLinePlaceholder":160},[147,1833,1834,1837,1839,1841,1843,1845,1847],{"class":149,"line":431},[147,1835,1836],{"class":214},"  useCounterStore",[147,1838,1093],{"class":222},[147,1840,270],{"class":218},[147,1842,1512],{"class":214},[147,1844,276],{"class":222},[147,1846,609],{"class":214},[147,1848,1849],{"class":222},"())\n",[147,1851,1852],{"class":149,"line":451},[147,1853,161],{"emptyLinePlaceholder":160},[147,1855,1856,1858,1860,1862,1864,1866,1869,1871,1873,1875,1877],{"class":149,"line":456},[147,1857,1836],{"class":214},[147,1859,1093],{"class":222},[147,1861,270],{"class":218},[147,1863,1520],{"class":214},[147,1865,1460],{"class":222},[147,1867,1868],{"class":470},"mutation",[147,1870,388],{"class":218},[147,1872,884],{"class":470},[147,1874,1811],{"class":222},[147,1876,1681],{"class":226},[147,1878,230],{"class":222},[147,1880,1881,1883,1885,1888,1890,1892,1894,1896],{"class":149,"line":480},[147,1882,371],{"class":266},[147,1884,270],{"class":218},[147,1886,1887],{"class":214},"log",[147,1889,1421],{"class":222},[147,1891,1868],{"class":266},[147,1893,388],{"class":218},[147,1895,884],{"class":266},[147,1897,1898],{"class":222}," })\n",[147,1900,1901,1904,1906,1908],{"class":149,"line":487},[147,1902,1903],{"class":214},"    saveState",[147,1905,276],{"class":222},[147,1907,284],{"class":266},[147,1909,289],{"class":222},[147,1911,1912],{"class":149,"line":509},[147,1913,1914],{"class":222},"  })\n",[147,1916,1917],{"class":149,"line":534},[147,1918,194],{"class":222},[147,1920,1921],{"class":149,"line":547},[147,1922,161],{"emptyLinePlaceholder":160},[147,1924,1925,1928],{"class":149,"line":571},[147,1926,1927],{"class":214},"subscribeToStore",[147,1929,782],{"class":222},[10,1931,1932],{"id":1932},"結論",[14,1934,1935],{},"subscribe 通常是大家在使用狀態管理套件中比較少去注意到的函數，然後不只是只能作持久化，拿來作監測 state 的變化也非常好用。",[1937,1938,1939],"style",{},"html pre.shiki code .shM36, html code.shiki .shM36{--shiki-default:#008000;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .se7cl, html code.shiki .se7cl{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .sHKXH, html code.shiki .sHKXH{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .s6uJR, html code.shiki .s6uJR{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .swGrk, html code.shiki .swGrk{--shiki-default:#AF00DB;--shiki-dark:#7DCFFF}html pre.shiki code .sucPa, html code.shiki .sucPa{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic}html pre.shiki code .sjNAT, html code.shiki .sjNAT{--shiki-default:#795E26;--shiki-dark:#7AA2F7}html pre.shiki code .s6v6z, html code.shiki .s6v6z{--shiki-default:#000000;--shiki-dark:#89DDFF}html pre.shiki code .sNwUV, html code.shiki .sNwUV{--shiki-default:#000000;--shiki-dark:#9ABDF5}html pre.shiki code .s5MyL, html code.shiki .s5MyL{--shiki-default:#0000FF;--shiki-dark:#BB9AF7}html pre.shiki code .swp_B, html code.shiki .swp_B{--shiki-default:#AF00DB;--shiki-dark:#BB9AF7}html pre.shiki code .sq2Xa, html code.shiki .sq2Xa{--shiki-default:#0070C1;--shiki-dark:#BB9AF7}html pre.shiki code .sJUHq, html code.shiki .sJUHq{--shiki-default:#001080;--shiki-dark:#C0CAF5}html pre.shiki code .sq7Q2, html code.shiki .sq7Q2{--shiki-default:#A31515;--shiki-dark:#89DDFF}html pre.shiki code .s58z3, html code.shiki .s58z3{--shiki-default:#A31515;--shiki-dark:#9ECE6A}html pre.shiki code .sny2E, html code.shiki .sny2E{--shiki-default:#000000;--shiki-dark:#BB9AF7}html pre.shiki code .s0ObY, html code.shiki .s0ObY{--shiki-default:#0000FF;--shiki-dark:#FF9E64}html pre.shiki code .svvEX, html code.shiki .svvEX{--shiki-default:#AF00DB;--shiki-default-font-style:inherit;--shiki-dark:#BB9AF7;--shiki-dark-font-style:italic}html pre.shiki code .s1TMK, html code.shiki .s1TMK{--shiki-default:#0070C1;--shiki-dark:#0DB9D7}html pre.shiki code .sWJqL, html code.shiki .sWJqL{--shiki-default:#001080;--shiki-default-font-style:inherit;--shiki-dark:#5A638C;--shiki-dark-font-style:italic}html pre.shiki code .s_ePm, html code.shiki .s_ePm{--shiki-default:#001080;--shiki-dark:#E0AF68}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTOFy, html code.shiki .sTOFy{--shiki-default:#001080;--shiki-dark:#0DB9D7}html pre.shiki code .sF_0_, html code.shiki .sF_0_{--shiki-default:#001080;--shiki-dark:#73DACA}html pre.shiki code .s4YYt, html code.shiki .s4YYt{--shiki-default:#001080;--shiki-dark:#89DDFF}html pre.shiki code .sEHUx, html code.shiki .sEHUx{--shiki-default:#0070C1;--shiki-dark:#FF9E64}html pre.shiki code .sjYsg, html code.shiki .sjYsg{--shiki-default:#098658;--shiki-dark:#FF9E64}html pre.shiki code .se0OL, html code.shiki .se0OL{--shiki-default:#001080;--shiki-dark:#7DCFFF}html pre.shiki code .s00W4, html code.shiki .s00W4{--shiki-default:#0000FF;--shiki-dark:#89DDFF}html pre.shiki code .sk53b, html code.shiki .sk53b{--shiki-default:#000000;--shiki-default-font-weight:inherit;--shiki-dark:#F7768E;--shiki-dark-font-weight:bold}html pre.shiki code .sX0bS, html code.shiki .sX0bS{--shiki-default:#267F99;--shiki-dark:#0DB9D7}",{"title":143,"searchDepth":157,"depth":157,"links":1941},[1942,1943,1949],{"id":12,"depth":157,"text":12},{"id":79,"depth":157,"text":80,"children":1944},[1945,1946,1947,1948],{"id":582,"depth":164,"text":583},{"id":948,"depth":164,"text":948},{"id":1181,"depth":164,"text":1181},{"id":1502,"depth":164,"text":1502},{"id":1932,"depth":157,"text":1932},"2023-05-29","md",false,"\u002Fimages\u002Fpost\u002Fredux-how-to-persist-data\u002Fpersist.webp",{},"\u002Fpost\u002Fredux-how-to-persist-data",{"title":5,"description":143},{"loc":1955},"post\u002Fredux-how-to-persist-data","subscribe function 你有聽過嗎？",[1961,86,582,1962,948,1502,1181],"data persist","redux persist","trcKni_20oTQeezf6NU0qrjF3Mytt3mQWXs63q8-cfI",1791370767601]