※スマホ対応はしてません。

タグ: vuex

Vue+Webpackの開発がすごい楽ちんだ。(Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分(28日公開)

これこれ。

インストール

vue-webpack-boilerplate自体は特にインストール作業はなさそうなんだけど、その前にvue-cliが必要です。

$ npm install -g vue-cli

これでコマンドラインから vue コマンドが使えるようになります。 “vue-cli” はそのコマンドをインストールする的なやつで、ブラウザが読み込む vue.js とは別物。

開始

出力結果は省略してるけど、こんな感じ。

$ vue init webpack my-project
$ cd my-project
$ yarn install

開発サーバー起動。

$ npm run dev

Listening at http://localhost:8080

URLを開くと最初のページが出てきます。やったね。

テンプレートから生成された画面。

Ctrl+C で終了。

大丈夫そうなので、今回生成されたファイルを見ていきます。

(さらに…)

Vuexをさっくりインストールしたけどまだよくわからない。(Vue.js始めるおれおれアドベントカレンダー2016 – 5日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 5日目

いよいよVuexを使ってみ始めることにしました。なんかまだよくわかってないけどこれ使うと良い感じになるんでしょ?

困ってること

TODOリストのフォームから新規作成した項目を一覧へ渡す際に、情報のやり取り、コールバックの呼び合いがなんか面倒だった。これを楽ちんにしたい。

デモ

こちらにございます。

vue-todo

どうやって使うんだろ

と思って見てたら “TodoMVC” といういかにもなのがREADMEのExamplesにあったのでそれを見てみます。

見た結果なんか色々他にも学ぶことがありそうだったのでそっと閉じて、ドキュメントの方を参照することにしました。

始めるを得る

んー自分の場合だと、こんなんだろうか。

var store = new Vuex.Store({
  state: {
    newTask: { finished: false, name: '' },
    tasks: [
      { finished: false, name: 'Buy milk 2L' },
      { finished: false, name: 'Call to Alice' },
      { finished: false, name: 'Return books' },
    ],
  },
  mutations: {
    add: function(state) {
      state.tasks.unshift(state.newTask);
      state.newTask = { finished: false, name: '' };
    },
  },
});
window.app = new Vue({
  data: store.state,
  methods: {
    newTask_submit: function(event) {
      store.commit('add');
    },
  },
  ...
});

やった動いた! これでコールバック類を削除できる。(今はひとつしかないけど。)

mutations?

mutation

主な意味: 変化、変更、転換、(世の)移り変わり、突然変異、突然変異体、母音変異

どうやらミュータント・ニンジャ・タートルズの「ミュータント」と同源らしい。はあ。あと最近のタートルズはごついな。

普通にオブジェクト

を直接参照するのと何が違うんだろう? 編集の方もコンポーネントに渡したオブジェクトを直接編集してもらってるし。

メソッド呼び出しは commit() を経由するようになるけど、でもそれくらい?

やってることが単純で簡単すぎるせいか、まだVuexの魅力に気付けていない……。もっと難しいアプリを作ったらわかるかしらん。

おしまい

なんかとりあえずVuexの導入はすげー簡単でした。いいのか?