タグ

vuexに関するi_matsuiのブックマーク (4)

  • Vuexでモジュール分割 〜ファイルを分けてみた〜 - Qiita

    Vuexを使っていてstateが多くなってきたのでモジュール化したいと思い、せっかくなので各モジュールを1ファイル毎に分けてみました。 モジュール化の設定と、コンポーネントからの利用方法をメモしておきます。 全部公式ページに書いてあることですが、特に呼び出し方なんかは、毎回「どう書くんだったけ??」と探すのが面倒だったのでまとめてみました。 環境 vue: 2.6 vuex: 3.5 ファイルを分ける さっそく各モジュールを1ファイに分けていきます。 今回はVuexの公式サイトの例をベースに利用したいと思います。 構成 ディレクトリ構成はこんな感じにします。 const getDefaultState = () => ({ message: '', count: 0, }) export default { namespaced: true, state: getDefaultState(

    Vuexでモジュール分割 〜ファイルを分けてみた〜 - Qiita
  • Nuxt.js + Typescript + Vuexする現時点のベストと思う方法 - Qiita

    はじめに Vuex + Typescriptは相性が悪いと言われており、色々な解決方法が展開されてきました。 そこにNuxt.jsが入ってくると更に混沌としていて、以前公式に書かれていたExampleのコードも(多分放置されて)いつの間にか消えている始末です。 個人的には vuex-module-decorators を使うのが今の時点では楽だし一番良さそうと思いました。 更に先日Nuxt.js + モジュールモードでの実装例が公式にREADMEに追加されていたので、今回はその実装方法を紹介しようと思います。 移り変わりが早い分野なので、近い将来また違うやり方が良い感じになってるかもしれません。未来に読む人は上記のリンク先も参照お願いします。 追記 Nuxt Typescriptの公式に、Storeの実装方法が追記されていました。 ここに記載のvuex-module-decrotaorsを

    Nuxt.js + Typescript + Vuexする現時点のベストと思う方法 - Qiita
  • Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと

    まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V

    Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
  • Vue.jsで簡単なメモアプリを実装する

    概要 以前に投稿した「サーバーサイドJavaエンジニアVue.jsの基を学習したときのメモ」に続く記事です。 Vue.jsの基と周辺技術を学びながら簡単なメモアプリを実装してみました。 実装にあたってVue.jsに加えてルーティングにvue-router、ストア(状態管理)にVuex、CSSフレームワークにbootstrap-vueを利用しました。 ソースコードはrubytomato/exercise-vueにあります。(2018年6月6日現在、この記事と若干変わっていますがご了承ください) 環境 Windows 10 Professional Node.js 8.11.1 Vue.js 2.5.16 vue-router 3.0.1 Vuex 3.0.1 bootstrap-vue 2.0.0-rc.11 vue-moment 4.0.0 vue-cli 2.9.3 Visual

    Vue.jsで簡単なメモアプリを実装する
  • 1