Vue.jsを使って良かったこと

Frontend Nagoya #1 LT

Transcript

1. Vue.jsΛ࢖ͬͯྑ͔ͬͨ͜ͱ ઙҪխݾ ೥݄೔
2. @count0 http://count0.org ઙҪխݾ
3. ࠓ೔͓࿩͢͠Δ͜ͱ ͓࢓ࣄͰVue.jsΛ࢖ͬͯۀ຿πʔϧΛվ मͨ͠ΒͩͬͨͷͰྑ͔ͬͨػೳΛ1 ͓ͭ࿩͠·͢ɻ
4. VuexͷϓϥάΠϯ
5. ͖͔͚ͬ • ঢ়ଶͷӬଓԽΛlocalstorage͔ΒIndexedDBʹ͢Δඞ ཁ͕͋ͬͨ • ঢ়ଶΛมߋͨ͠ΒIndexedDBͱউखʹಉظͯ͠ཉ͍͠ • ྫ͑͹vuex-persistedstateΈ͍ͨʹ
6. vuex-persistedstate ঢ়ଶΛlocalstorageͱಉظͯ͘͠ΕΔɻ ࠷௿ݶ࢖͏ʹ͸͜Ε͚ͩɻ ͱͯ΋ศརɻ ͜ΕͷIndexedDB൛͕ཉ͍͠ɻ import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [createPersistedState()] })
7. ͱΓ͋͑ͣconsole.logͯ͠ΈΔ Vue.use(Vuex) function onlyConsole () { return store => { store.subscribe(mutation => { console.group('onlyConsole plugin') console.dir(mutation) console.groupEnd() }) } } export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: initialState(), mutations, actions, getters, plugins: [ onlyConsole() ] })
8. શͯͷmutation͕ૉ௨Γ จࣈ௨ΓTVCTDSJCFʢఆظߪಡʣ͍ͯ͠Δ
9. mutation typeΛϑοΫʹ store.subscribe((mutation, state) => { switch (mutation.type) { case types.ADD_ITEM: case types.UPDATE_ITEM: const item = mutation.payload.item localforage.setItem(item.id, item) break case types.REMOVE_ITEM: localforage.removeItem(mutation.payload.item.id) break case types.CLEAR_LIST: localforage.clear().then(() => console.log('clear database.')) break default: break } }) Ϧετͷૢ࡞͕ൃੜͨ͠Β*OEFYFE%#ʹ΋൓ө
10. ΋͏Ͱ͖ͨ ΞϓϦέʔγϣϯͷmutation typeʹґଘ͓ͯ͠ Γʢີ݁߹ʣΑΖ͘͠ͳ͍఺΋͋Δ͕ɺ͜ΕͰ ໨త͸ୡ੒Ͱ͖ͯ͠·ͬͨɻ ※࣮ࡍͷίʔυ͸localForageͷॳظԽ΍ಡΈग़ͨ͠σʔλΛঢ়ଶʹ෮ؼͤ͞Δॲ ཧΛߦ͍ͬͯ·͢ɻ
11. ·ͱΊ • store.subscribeΛར༻͢Ε͹mutationΛϑο Ϋʹͨ͠ॲཧΛ؆୯ʹ௥Ճ͢Δ͜ͱ͕Ͱ͖· ͢ • ࠓճͷྫͰ͸IndexedDBͰ͕ͨ͠ɺαʔόʔ αΠυͷDBʹঢ়ଶΛӬଓԽ͢Δ͜ͱ΋γϯϓ ϧʹ࣮૷Ͱ͖ͦ͏Ͱ͢
12. ͋Γ͕ͱ͏͍͟͝·ͨ͠