初心者によるVuexの忘備録

18490 ワード
Vue.js nuxt.js Vuex Node.js 新人エンジニア Node.js テキストリンク

概要

前書いたの記事の改良版です。

が、完璧な解説ではないので新人エンジニアの方や、「nuxt.jsを触り始めたけど、Vuexってなんなん？」って人がニュアンスだけ掴む用に読んでいただけると嬉しいです。

前書いた黒歴史ばりの記事はこちらです。

Vuexとは

VuexはVueComponents, Actions, Mutations, Stateの順番でデータが回っていきます。

データの流れが一方向になる為、単一データフローなんて呼ばれたりもしています。

単一データフローや、元になっているFluxなどについてはググってください。（小声）

ちなみにVuexはリロードがかかるまで値が破棄されないです。

例えばAPIを叩いてエラーになった時に、$router.replaceなどでエラー画面に移動させる前にエラーコードとエラーメッセージをVuexに渡して描画させることもできます。

例外なのが、fetchやasync dataなどでAPIコールを行なってエラー画面に移動したい場合には$router.replaceやpushが使用できず、redirectで画面遷移する事にになってしまいます。

その為、Vuexに値を渡しても初期化されてしまうので注意が必要です。

では、サンプル付きで詳しくVuexの使い方を説明していきます。

Vuexの使い方

今回のサンプルはNuxt.jsを使用して説明していきます。
あと、UIコンポーネントでelement-uiも使用しています。

サンプルの実行方法は

  • create-nuxt-appでテンプレを作る。（ここの説明は割愛します。）
  • 下の説明で出てくるindex.jsとindex.vueをサンプルのパスと同じところにコピペ。

で、動くと思います。

動かなかった場合は、ちょこちょこ設定していただければと思います。。。（動かなかったらすみません。）

Vuexの記述

Vuexの各フローについての記述はapp/store/index.jsに処理を書いていきます。

今回は以下の様な構成のindex.jsを使用します。

store/index.js
export const state = () => ({
    user: {
        name: 'sample name',
        age: 'sample age',
        job: 'sample job'
    }
})

export const mutations = {
    setName (state, value) {
        state.user.name = value
    },
    setAge (state, value) {
        state.user.age = value
    },
    setJob (state, value) {
        state.user.job = value
    },
}

export const actions = {
    setName (context, value) {
        context.commit('setName', value)
    },
    setAge (context, value) {
        context.commit('setAge', value)
    },
    setJob (context, value) {
        context.commit('setJob', value)
    }
}

export const getters = {
    getUser (state) {
        return state.user
    }
}

State

Stateは、データの置き場所と覚えておけばとりあえず大丈夫です。
Stateでは最低限のデータの受け皿だけあればいいので、今回はuser.nameなどにsampleと初期値を入力していますが、初期値が必要ない場合は空やnullで初期化だけ行なっておいても大丈夫です。

Mutations

Mutationsは、Stateの値を書き換えられる唯一の場所です。
ここ以外でStateの値を書き換えると怒られます。

Actions

Actionsは、Vueコンポーネントから値を受け取り、Mutationsに受け渡してあげる場所です。
ただ受け取った値をMutationsにスルーパスするだけではなく、Actions内で値をごにょごにょしてMutationsに渡すことも可能です。

Getters

Gettersは、Stateの値をVueコンポーネントに配信する場所です。
Vueコンポーネント側ではgettersからStateの値にアクセスして、処理を行ったり、描画させたりします。

vueファイルの記述。

では、vue側のコードをみていきましょう。

page/index.vue
<template>
    <section class="container">
        <div>
            <logo/>
            <h1 class="title">
                Vuex Sample
            </h1>
            <h2 class="subtitle">
                Wally's Sample for Nuxt.js project
            </h2>
            <div class="sample">
                <div class="content">
                    <p>Name: {{ $store.getters.getUser.name }}</p>
                    <p>Age: {{ $store.getters.getUser.age }}</p>
                    <p>Job: {{ $store.getters.getUser.job }}</p>
                </div>
                <div class="input">
                    <el-input placeholder="Please input" v-model="input"></el-input>
                    <el-button type="primary" @click="changeState('name')">Name</el-button>
                    <el-button type="primary" @click="changeState('age')">Age</el-button>
                    <el-button type="primary" @click="changeState('job')">Job</el-button>
                </div>
            </div>
        </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
    components: {
        Logo
    },
    data () {
        return {
            input: null
        }
    },
    methods: {
        changeState (mode) {
            console.log('change ' + mode + ' value.')
            const changeValue = this.input
            if (mode === 'name') {
                this.$store.dispatch('setName', changeValue)
            } else if (mode === 'age') {
                this.$store.dispatch('setAge', changeValue)
            } else {
                this.$store.dispatch('setJob', changeValue)
            }
            this.input = ''
        }
    }
}
</script>

<style>

.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.title {
    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
}

.subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
}

.links {
    padding-top: 15px;
}

div.sample {
    margin-top: 64px;
}

div.input {
    display: flex;
    margin-top: 32px;
}
</style>

実際の動きはこんな感じです。

処理としては、インプットボックスに入力された値で、Stateを書き換える簡単なサンプルです。

Nameなどのボタンを押してもらうと、inputに入力された値でボタンに対応したStateを書き換えます。

VueDevToolのVuexの項目を確認しながら操作してもらうとわかりやすいと思います。

まとめ

Vuexはnuxtプロジェクトで必ずと言っていいほど使用します。

うまく使いこなせば、離れられないです。（まだまだうまく使えてないです。。。）