Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

omiend
January 22, 2019

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

omiend

January 22, 2019
Tweet

More Decks by omiend

Other Decks in Programming

Transcript

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide