何事も手を動かすことが大事
Qiita の記事(下記記載)では、いきなりVuexの導入から始まっているがリンクにある gist のページを見るとVueの環境構築から手順があるのでわからない人は参考にしましょう。
例によって Linter は、今回も抜きます。というのも今回は、構文に敏感に注意するより手を動かして Vue と仲良くなるのが目的なのでそこは、捨てます。実際の開発では、大切な要素であることは忘れずに進めます。
自分は以下のように設定しました。
? Project name your_app_name
? Project description A Vue.js project
? Author hironeko <xxxxxxxx@exsample.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
Vuex を install
さっそく install するみたいですね。待ってました。
cd your_app_name
yarn add vuex
install 後にひとまずブラウザで表示確認をするそうです。します！
yarn dev
このまま起動しま作業を続けます。変更した際も自動検知して更新がされるので即時確認ができます。
作成するページのベースを作成
src/components/Hello.vueはやはり使わないでしょう。これをコピーして作成してますがそこはあえて書きます。
<template>
<div>Formページ</div>
</template>
<script>
export default {
name: "form",
data() {
return {
msg: "welcome to your vue.js app"
}
}
}
</script>
msgに関しては、消してもよかったかなーとおもいつつ一応残しておきます。
モジュールを作成
src/components/modulesディレクトリを作成するのだ！作成したらディレクトリ直下にHeadComp.vueを作成。
作成したら Form.vue 同様記述します。
がここで問題が発生そんなmodulesはねええええええというエラーになったのでディレクトリ名を変更します。
src/components/subcomponents
きっとこれは、アンチなパターンというかこんな名称にすることは本来はないでしょう。ただ学習が優先事項なので今回は、気にしません！
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "headComp",
data() {
return {
title: "感想を入力"
}
}
}
</script>
この作成した module/HeadComp.vue を先ほど作成した Form.vue で使用できるようにします。
Form.vue へ追記
作成したHeadComp.vueを使えるように下記のように import します。
components を追記します。
<template>
<div>
Formページ
<HeadComp></HeadComp>
</div>
</template>
<script>
import HeadComp from "@/components/subcomponents/HeadComp"
export default {
name: "form",
data() {
return {
msg: "welcome to your vue.js app"
}
},
components: {
HeadComp
}
}
</script>
ここから先は次回以降に持ち越す。
参考サイトと使用ツールリンク
vue.js ＋ Vuex チュートリアル chrome 拡張機能 Vue.jsdevtools Vue の環境構築手順