第9回 ペパボテックカンファレンスの発表資料です

6. Components
Vuex
Actions
Mutations
State
Components
Dispatch Commit
MutateRender

7. Component
ComponentComponent
Component
State
:user="user"
:user="user"

8. Component
ComponentComponent
Component
EventBus.$emit
Event
Bus
EventBus.$on

9. Components
Actions
Mutations
State
Components
methods: {
onClickTheButton () {
const payload = { ... }
this.$store.dispatch(
'theAction',
payload,
}
}
}

10. Components
Actions
Mutations
State
Components
actions: {
theAction (context, payload) {
const payload = { ... }
context.commit(
'theMutation',
payload,
}
}
}

11. Components
Actions
Mutations
State
Components
mutations: {
theMutation (state, payload) {
state.foo = payload.foo
}
}

12. Components
Actions
Mutations
State
Components
getters: {
theGetter (state) {
if (state.foo.bar) {
return 'Bar'
} else {
return 'Baz'
}
}
}
// getter

15. <input v-model="profile.name">
computed: {
profile () {
return this.$store.state.profile
}
}

16. Components
Actions
Mutations
State
Components
v-model

17. new Vuex.Store({
strict: process.env.NODE_ENV !== ‘production’
})

18. <input :value="name" @input="updateName">
computed: {
name () {
return this.$store.state.profile.name
}
},
methods: {
updateName (e) {
this.$store.commit('updateName', e.target.value)
}
}

19. mutations: {
updateName (state, name) {
state.profile.name = name
}
}

20. Components
Actions
Mutations
State
Components
@input="updateName"
:value="name"

21. <input v-model="name">
computed: {
name: {
get () {
return this.$store.state.profile.name
},
set (value) {
this.$store.commit('updateName', value)
}
}
}

22. Components
Actions
Mutations
State
Components
set(value)
get()

24. <form @submit.prevent="onSubmit">
<input v-model="name">
</form>
computed: {
name: { ... }
}
methods: {
onSubmit () {
this.$store.dispatch('submitProfile', profile)
}
}

25. Components
Actions
Mutations
State
Components
set(value)
get()

26. Components
Actions
Mutations
State
Components
onSubmit

28. <input v-model="name">
computed: {
name: {
get () { ... },
set (value) { ... }
}
}
mutations: {
updateName (state, name) { ... }
}

29. <input v-model="name">
<input v-model="age">
computed: {
name: { ... },
age: { ... }
}
mutations: {
updateName (state, name) { ... }
updateAge (state, age) { ... }
}

31. <input v-model="name">
<input v-model="age">
computed: {
name: { ... },
age: { ... }
}
mutations: {
updateName (state, name) { ... }
updateAge (state, age) { ... }
}

32. <input v-model="name">
<input v-model="age">
computed: {
name: { ... },
age: { ... }
}
mutations: {
updateName (state, name) { ... }
updateAge (state, age) { ... }
}

33. <input v-model="name">
<input v-model="age">
computed: {
name: { ... },
age: { ... }
}
mutations: {
updateName (state, name) { ... }
updateAge (state, age) { ... }
}

34. computed: {
...mapTwoWayProperties(['name', 'age'], options)
}
computed: {
name: { get() { ... }, set (val) { ... } }
age: { get() { ... }, set (val) { ... } }
}

35. mutations: {
mutateEditing (state, {key, value}) {
state.profile[key] = value
},
...
}

38. mutations: {
mutateEditing (state, {key, value}) {
state.profile[key] = value
}
}

39. mutations: {
mutateEditing (state, ????) {
state.profile.pets[1].name = value
}
}

40. Components
Actions
Mutations
State
Components
set(value)
get()

41. computed: {
...mapTwoWayProperties(['name', 'age'], options)
}
computed: {
name: { get() { ... }, set (val) { ... } }
age: { get() { ... }, set (val) { ... } }
}

42. computed: {
...mapTwoWayProperties(['name', 'age'], options)
}
computed: {
name: { get() { ... }, set (val) { ... } }
age: { get() { ... }, set (val) { ... } }
}

46. <input v-model="profile.name">
<input v-model="profile.age">
<div v-for="pet in profile.pets">
<input v-model="pet.name">
</div>
computed: {
profile () {
return this.$store.state.profile
}
}

48. Components
Actions
Mutations
State
Components
v-model

50. state: {
profile: {}
}

51. state: {
profile: {},
editingProfile: {}
}

52. state: {
profile: {}, // valid
editingProfile: {} // invalid ?
}

53. <input v-model="profile.name">
data () {
return {
profile: { name: "" }
}
}

56. Components
Actions
Mutations
State
Components
fetchAddress(zipCode) complementEditingAddress
Address

57. Components
Actions
Mutations
State
Components
fetchAddress(zipCode)
Promise<Address>
Address

58. Components
Actions
Mutations
State
Components
fetchAddress(zipCode)
Address