Nuxt.js_Vue.js_のVuexの動かしかたをまとめてみたよ.pdf

Transcript

1. Nuxt.js（Vue.js）のVuexの動かしかたをまとめてみたよ。 @omiend
2. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template>
3. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> クリックすると
4. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> methodsに定義されたメソッド が実行され
5. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> メソッドの中ではactionsの処 理をdispatchすることで呼び せる ここでmutationsの処理を commitすることで呼び出す もできる
6. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> actionsに定義された処理では mutationsの処理をcommitす ることで呼び出せる
7. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> mutationsの中では、唯一 stateの状態を変更することが できる
8. Store Page export const mutations = { increment_mutation (state, payload) { state.counter++ state.click_date = payload.click_date } } export const actions = { increment_action ({ commit }, payload) { commit('increment_mutation', { click_date: payload.click_date }) } } export const state = () => ({ counter: 0, click_date: "" }) computed: { counter() { return this.$store.state.counter }, click_date() { return this.$store.state.click_date } } methods: { increment() { this.$store.dispatch('increment_action', { click_date: new Date }) } } <template> <div> <p>{{counter}}</p> <p>{{click_date}}</p> <button @click="increment()">カウントアップ </button> </div> </template> $store.stateでstateの状態 を参照することができる storeはリアクティブデータなの で、参照しているだけで値の変 更に伴う画面表示の変更を自 動で行っていくる