クロコめも2。

ただのめもー

vuejsの作者さんが考えたvuejsにマッチするflux?

vuexを動かしてみる

動機:githubで見つけて単純にDLして動かそうとしたら動かなかったから

環境メモ

  • babelは5系
  • nodejsは4.2.2
  • npmは3.5
  • .vueファイルを使わない(ただの個人的な好み)

作業順

  1. ディレクトリを作る
  2. npm でいろいろインストール
  3. vuexをプロジェクトの中に
  4. exampleにあるcounterを移植して動かしてみる
  5. testを移植して動かしてみる

[ディレクトリを作る]

# ディレクトリ作成
mkdir プロジェクトのフォルダ
cd プロジェクトのフォルダ
mkdir -p build test src/{components,views,assets/{js,css}}

[npm でいろいろインストール]

# npm で必要なものをあつめてくる
npm init 
npm i -g webpack webpack-dev-server mocha babel-loader@^5.3
npm i -S vue 
npm i -D babel-loader@^5.3 webpack style-loader css-loader sass-loader html-loader mocha mocha-loader chai

[vuexをプロジェクトの中に]

今回は/src/assets/vuexというディレクトリを用意してその中にgithubから持ってきたvuexのsrc配下を入れる

[exampleにあるcounterを移植して動かしてみる]

build/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vuex counter example</title>
</head>
<body>
<counter></counter>
<script src="js/app.js"></script>
</body>
</html>

src/assets/js/main.js(vuexのexampleのままimportのパスを変えただけ)

import Vue from 'vue'
import Counter from '../../components/counter/index'

new Vue({
  el: 'body',
  components: { Counter }
})

src/assets/js/vuex.js(vuexのexampleのcounter内にあるvuex.jsをそのままもってきてimportのパスだけ変更)

import Vue from 'vue'
import Vuex from '../vuex'

~省略

src/components/counterにCounter.vueを分割して2ファイル
index.js

import vuex from '../../assets/js/vuex'

export default {
    template: require('./template.html'),
    computed: {
        count () {
            return vuex.state.count
        }
    },
    methods: vuex.actions
}

template.html

<div>
    Clicked: {{ count }} times
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">Increment if odd</button>
    <button @click="incrementAsync">Increment async</button>
</div>

サーバを起動して確認

webpack-dev-server -d --inline

http://localhost:8080/

[testを移植して動かしてみる]

testディレクトリにあるtest.jsをそのまま移植してimportのパスだけ直す

mocha --compilers js:babel-core/register

通りました。これでいろいろ試せるかな

見ないふりをしてたけど、eslintを入れて動かすとなんか警告が出る。けどなんの警告だかはわかってない