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

Transcript

1. Nuxt.js（Vue.js）のVuexの動かしかたをまとめてみたよ。
   @omiend
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   クリックすると
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   methodsに定義されたメソッド
   が実行され
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   メソッドの中ではactionsの処
   理をdispatchすることで呼び
   せる
   ここでmutationsの処理を
   commitすることで呼び出す
   もできる
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   actionsに定義された処理では
   mutationsの処理をcommitす
   ることで呼び出せる
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   mutationsの中では、唯一
   stateの状態を変更することが
   できる
   

   View Slide

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 })
   }
   }
   
   
   {{counter}}
   {{click_date}}
   カウントアップ
   
   
   $store.stateでstateの状態
   を参照することができる
   storeはリアクティブデータなの
   で、参照しているだけで値の変
   更に伴う画面表示の変更を自
   動で行っていくる
   

   View Slide