Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuexについて
Search
sinpey_g2
October 19, 2017
Technology
0
940
Vuexについて
Vuexについて社内LTで発表したときの資料です
sinpey_g2
October 19, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
130
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
150
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
210
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
実践マルチモーダル検索!
shibuiwilliam
1
220
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.5k
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
sony
0
150
DMMの検索システムをSolrからElasticCloudに移行した話
hmaa_ryo
0
170
SOTA競争から人間を超える画像認識へ
shinya7y
0
610
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
Observability — Extending Into Incident Response
nari_ex
1
570
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
Six Lessons from altMBA
skipperchong
29
4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
It's Worth the Effort
3n
187
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Why Our Code Smells
bkeepers
PRO
340
57k
Statistics for Hackers
jakevdp
799
220k
Transcript
Vuexʹ͍ͭͯ !TJOQFZ@H
Vuex ͱ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷͭΒ͍ͱ͜ΖΛ ղܾͯ͘͠ΕΔͷ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.js ͷͭΒ͍ͱ͜Ζ
Vue.jsͷσʔλϑϩʔ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷσʔλϑϩʔ ୯ҰίϯϙʔωϯτͰ͔͠௨༻͠ͳ͍ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷͭΒ͍ͱ͜Ζ ίϯϙʔωϯτؒͰ ঢ়ଶͷڞ༗͕໘
Vue.jsͷͭΒ͍ͱ͜Ζ  ࢠ ଙ isUpdated role index props : [
role, isUpdated ] props : [ role ] props : [ role, index, isUpdated ] props : [ role, index, isUpdated ] props : [ isUpdated ] props : [ isUpdated ] ˡΤϥʔ
Vue.jsͷͭΒ͍ͱ͜Ζ wίϯϙʔωϯτ͔Βঢ়ଶͷड͚͠ wଞίϯϙʔωϯτͰঢ়ଶΛڞ༗ ଙɺͻଙ͕૿͑ΔͱQSPQTࠈʹͳΔ ίϯϙʔωϯτͷঢ়ଶมԽΛͰXBUDIͯ͠ৗʹಉظ ͭΒ͗͢Δ
VuexΛ͏ͱ…!
VuexΛ͑͜͏ॻ͚Δ ɾશͯͷίϯϙʔωϯτʹରͯ͠ ɹঢ়ଶΛཧɺڞ༗Ͱ͖Δ ɾࢠؒͰ༨ܭͳঢ়ଶͷ ɹड͚͠Λ͠ͳͯ͘Α͘ͳΔʋ(*´∇ʆ)ů
Vue.jsͷσʔλϑϩʔ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vuexͷσʔλϑϩʔ 'MVY 3FEVY͔ΒͷӨڹΛड͚͍ͯΔ ίϯϙʔωϯτͷ ·ͱ·Γ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vuex جຊతͳ͍ํ
Vuex ͍ํ const store = new Vuex.Store({ state: { },
mutations: { }, actions: { } }) // State // Mutation // Action
Vuex ͍ํ State State VuexͷجຊͰ͋Γ࠷େͳཁૉ = ঢ়ଶ
state: { form: { article: { title: '', ogp_title: '',
description: '', keywords: '', main_image: '', }, writers: [], blocks: [], status: Number, should_update: Boolean }, role: String, errors: [], }, Vuex ͍ํ State
Vuex ༻ྫ Mutation Mutation StateΛมߋ͢Δ = ঢ়ଶΛมԽͤ͞Δ MutationҎ֎͕ StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
mutations: { readRole (state, role) { state.role = role },
}, this.$store.commit(‘readRole', ‘staff’) Vuex ༻ྫ Mutation Mutarionͷએݴ ίϯϙʔωϯτͰMutationΛ͏
Vuex ༻ྫ Action Action ඇಉظॲཧΛߦ͏ MutationΛݺͿ StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
Vuex ༻ྫ Action Action MutationͰඇಉظॲཧΛߦΘͳ͍ ඇಉظॲཧ͕ແ͍߹ActionΛ հ͞ͳͯ͘ྑ͍
actions: { saveRole: function(context) { axios.post().then( context.commit(‘saveRole’)) } } methods:
{ saveRole() { this.$store.dispatch('saveRole') } } Vuex ༻ྫ Action Actionͷએݴ ίϯϙʔωϯτ͔ΒActionͷ࣮ߦ
·ͱΊ w7VFYͱ wෳίϯϙʔωϯτͰঢ়ଶͷڞ༗Λศརʹ͢Δͷ wجຊతͳ͍ํ w4UBUF wঢ়ଶΛอ࣋ w.VUBUJPO wঢ়ଶΛมߋ͢Δ w"DUJPO wඇಉظॲཧΛߦ͏
ࢀߟ wެࣜυΩϡϝϯτ IUUQTWVFYWVFKTPSHKB w7VFKTͷίϯϙʔωϯτͱࢠؒσʔλͷૹड৴ ɹ IUUQDIJCJOPXBOFUOPUFWVFKTWVFIUNM