vuejsの作者さんが考えたvuejsにマッチするflux?
vuexを動かしてみる
動機:githubで見つけて単純にDLして動かそうとしたら動かなかったから
環境メモ
- babelは5系
- nodejsは4.2.2
- npmは3.5
- .vueファイルを使わない(ただの個人的な好み)
作業順
- ディレクトリを作る
- npm でいろいろインストール
- vuexをプロジェクトの中に
- exampleにあるcounterを移植して動かしてみる
- 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
[testを移植して動かしてみる]
testディレクトリにあるtest.jsをそのまま移植してimportのパスだけ直す
mocha --compilers js:babel-core/register
通りました。これでいろいろ試せるかな
見ないふりをしてたけど、eslintを入れて動かすとなんか警告が出る。けどなんの警告だかはわかってない