HTML
JavaScript
vue.js
tweenmax
Vuex

Vuex 基礎中の基礎でズンドコキヨシ!!!

記事概要

Vuexを使用してボタンを押すとstateが
【 ズン → ズン → ズン → ズンドコ → キヨシ‼ 】とループするモジュールを
作成したのでそのメモ書き・解説

使用した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" />

完成形

See the Pen Vuex.js01 (ズンドコ) by daichi (@da10410) on CodePen.

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

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 }}}に入るcall
callに次何が入るか判定する際に使用する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.js
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関連の便利なプラグインやフレームワークが続々出てきているので
また触ってみたいと思っています!