Noob Front End Engineer Blog

CONTACT

Vuex の基礎的な使い方をズンドコキヨシで試してみる

2018/07/05

概要

Vuex の基本的な使用法の紹介します。今回は例として、
【 ズン → ズン → ズン → ズンドコ → キヨシ‼ 】とループするモジュールを作成してみました。

使用する CDN

# Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

# Vuex
<script src="https://unpkg.com/vuex"></script>

# TweenMax
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

# google fonts
<link
  href="https://fonts.googleapis.com/earlyaccess/hannari.css"
  rel="stylesheet"
/>

完成形

※フォントサイズの都合上、画面が小さすぎるとバグります。

HTML 部分

<div id="app">
  <p id="kiyoshi">{{ zundoko }}</p>
  <button id="btn" @click="callcommit">せぃ</button>
</div>

{{ zundoko }}

この zundoko に入る state が 【 ズン → ズン → ズン → ズンドコ → キヨシ‼ 】に変わる

click="callcommit"

後述するmutationcommitする関数が書かれている collcommit関数を呼び出しています。

JavaScript 部分

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    call: "ズン",
    num: 0,
  },
  mutations: {
    callchange(state) {
      switch (state.num) {
        case 0:
          state.call = "ズン"
          break
        case 1:
          state.call = "ズン"
          break
        case 2:
          state.call = "ズン"
          break
        case 3:
          state.call = "ズンドコ"
          break
        case 4:
          state.call = "キヨシ!!!"
          break
      }
      ++state.num
      if (state.num === 5) state.num = 0
    },
  },
})

const temp = new Vue({
  el: "#app",
  computed: {
    zundoko() {
      return store.state.call
    },
  },
  methods: {
    callcommit() {
      store.commit("callchange")
      TweenMax.fromTo(
        "#kiyoshi",
        0.5,
        { top: 0, opacity: 0 },
        { top: "150px", opacity: 1, ease: Bounce.easeOut }
      )
    },
  },
})

Vue.use(Vuex)

Vuex を使用する宣言です。

Store

state

状態を保存しています。ここでは HTML 部分の{{ zundoko }}}に入るcallcallに次何が入るか判定する際に使用するnumを宣言しています。

mutation

Vuexstate の値を変更できる唯一の方法がこのmutationcommitする事です。 mutationにはstateを変更するための処理が書かれています。

今回はstatecallに何が入っているかnumの数値から参照しています。
表にするとこんな感じ  ⇓

 ズン   ズン   ズン   ズンドコ   キヨシ 
0 1 2 3 4

switch 文で次に来るセリフをcallに入れる。 switch を抜けた後にnumに 1 を足し、numが 5 になったら 0 に戻す。

Vue

el

対象を指定する。ここではid="app"

compted

{{ zundoko }}に返す値を算出する。

method

commit とアニメーションを行う関数が書かれている。 HTML 部分のclick="callcommitで呼び出されるのはここ。

TweenMax.fromTo(
  "#kiyoshi",
  0.5,
  { top: 0, opacity: 0 },
  { top: "150px", opacity: 1, ease: Bounce.easeOut }
)

アニメーションを js で簡単に書ける TweenMax.js を使用しています。 ファイルサイズが他のアニメーションライブラリに比べ大きいですが、 フルスタックで便利なのでおすすめです。 (正直今回程度のアニメーションであれば js なり css が得意な方からすると不要そうですが…)

今回の使用例の説明としては、id="kiyoshi"0.5秒かけて topの位置0opacity0から topの位置150pxopacity1になるアニメーションを記述しています。

終わりに

Vuex の簡単なデモをおこなってみました。 公式の説明にもあったのですが、実際に Vuex が必要となってくるのは 大規模なプロジェクトの時で、私のように個人的に Vue を使用しているだけの 人にとっては管理が難しそうでした。使いこなせるとかっこいいな…

Vue 関連の便利なプラグインやフレームワークが続々出てきているので また触ってみたいと思っています!


Written by daichi iwamoto