Vue.jsとVuexを使って、TODOアプリを作ってみよう。ログインSearchrailsjQueryReactサーバー構築その他BizContactMenurailsjQueryReactサーバー構築その他BizContactVue.jsとVuexを使って、TODOアプリを作ってみよう。HomeプログラミングVue.jsとVuexを使って、TODOアプリを作ってみよう。Vue.jsとVuexを使って、TODOアプリを作ってみよう。Vue.jsとVuexを使って、TODOアプリを作ってみよう。コメントはまだありませんTweet前回のカウンターアプリに引き続き、今回はTODOアプリを作ってみようと思います。基本は、前回お話ししたので、今回は、前回説明してこなかった部分に注力を置いて説明します。Vue.jsの初心者をちょっと超えたぐらいですが・・・まずVue.jsとVuexでアプリを組むには、アプリの全体像をイメージし、どんな画面で、どんなイベントがあって、どんな値を保持しなければならないかをしっかりと把握する。画面の絵なんか描くといいかもですね。今回の出来上がりイメージはこんな感じ。ページ上部に、新しいTODOを入力する場所があって、追加すると、下に新たなTODOとして表示される。表示されたTODOの文字をクリックすると、処理済みになり、削除をクリックすると、リストから削除される。・TODOの文字列クリックで、処理済み・削除ボタンで、リストから削除storeから取得したいもの・TODOのアイテム全て・新しいTODOの入力途中の文字ではまず、mutation-type.jsに定義すべき変数です。'CHANGE_MYSTRING'次、storeを定義しましょう。store次にフロントエンドです。ここは説明を加えておきます。Leafコンポーネントです。v-forでループさせます。LeafコンポーネントのプロパティにTotoアイテムの1つのデータを引き渡します。新しいTodoの文字は入力途中のものも全て管理します。IN/OUT双方向管理です(v-model)。ネストしたストアですが、取得は素直にthis.$store.state.todo.mystringコミットの方はちょっと工夫します。componentsで定義しておきます。propsで受けます。クラスのオンオフを制御しているところでしょうか。15%;}</style>最後にルートファイルの編集です。http://localhost:8080/#/todoで表示されます。すごく説明をすっ飛ばしましたが、カウンターアプリのソースの説明を合わせて読むと理解いただけると思います。前回のカウンターと今回のTODOアプリのソースを添付します。すれば使えると思います。Vue.jsとVuexを使って、カウンターアプリを作ってみよう。PostsVue.jsとVuexを使って、カウンターアプリを作ってみよう。2018年6月8日Vue.js始めました。掴めてきたので、vuexを使ってカウンターアプリを作ってみました。storeをmoduleで分割して、中規模くらいのアプリなら対応できるような感じに仕上げてみました。Vuexがややこしいというか、どういう構造で、どう利用するのかが難しい。これに慣れるのが一番のキモです。シンプルですが、こんな感じ。+++をクリックで、インクリメント、ーーーでデクリメント。date*日本語が含まれない投稿は無視されますのでご注意ください。Ryzenで使用時に定期的にフリーズする。axiosを使ってファイルアップロードを実装してみる(バックエンドはRails)ReactでSPAを作り、Google認証(OAuth)でログインする。Ryzenで使用時に定期的にフリーズする。64bitで使えるようにする。