Advantages of Pinia vs Vuex | Vue Mastery
What is Pinia? By now, you’ve probably heard that Pinia is the officially recognized state management library for Vue.js. Evan You even referred to it as the de facto Vuex 5. But do you know why you should be using Pinia over Vuex and how to use Pinia? In this article, we’ll explain why, in the fight between Vuex vs Pinia, Pinia is the clear winner for your Vue app’s state management. But first, l
VueJS で Storybook を使う
VueVueJS で Storybook を使うモジュラーと再利用可能なコンポーネントを作るために Vue と Storybook でコンポーネント ライブラリを構築する方法を学びましょう。 Storybook はインタラクティブに開発し、ユーザー インターフェイス コンポーネントをアプリケーションを実行しないでテストできます。Storybook は独自の Webpack 構成でコンポーネント ライブラリとしての役目を果たすので、プロジェクト依存関係や要件を気にせずに個別に開発できます。 本投稿では、チームメートの Steve Hobbs 氏が作成した人気のカンバンボード プログレッシブ Web アプリケーション（PWA）（GitHub で入手可能）を使って、Storybook を既存の Vue.js プロジェクトに統合する方法を学んでいきます。このプロセスは新しい Vue プロジェクトに
vuex-module-decoratorsとTypeScriptでvuexをスマートに書く | RE:ENGINES
はじめに こちらの記事で紹介したように、Vue CLI 3からVue.jsを手軽にTypeScriptで書くことができるようになりました。しかし、vuexに関してはそのままではTypeScriptで書くのは難しいように思います。 そこで、今回は vuex-module-decorators というサードパーティ製のパッケージを使って、より安全でスマートにvuexを扱う方法を紹介します。 導入 以下のコマンドでパッケージをインストールします。 // for npm npm install -D vuex-module-decorators // for yarn yarn add -D vuex-module-decorators
実践StorybookでVuexに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。最近熱があるのはSVGと相変わらずにStorybookです。あと弁当男子始めました。 前置きStorybookとはいわばコンポーネントのカタログを作成することができる開発ツールです。 今回は実践の紹介ということで詳細は省略しますが、VueやReactを導入したコンポーネント指向な開発をしているのであれば、開発効率の向上は間違い無しなので是非とも取り入れてみていただきたいです。 実践Storybook vs Vuexコンポーネントの複雑さの基準storyの作りやすさは、当然のことですが、コンポーネントの複雑さに応じて変化します。大雑把ですが私はstoryの作りやすさの基準として、作り易い順に以下のような基準を設けています。 外部とのインタフェースがない親コンポーネントとのインタフェースは存在するがstoreにアクセスしないstoreにアクセ
Full-Stack JavaScript meets DDD. - Qiita
これは 2020-01-10 に開催された、DDD meetup#3 でのLTの内容を記事化したものです。 Vuex+Express環境でどんなアーキテクチャを採用したか、して良かったこと／悪かったことを発表しました（LT資料はこちら）。 問題提起 フロントエンドでDDDを実践しようと考えて、結局採用を見送った経験のある方は以外に多いのではないでしょうか。ドメイン知識はバックエンドに集中させてフロントはできるだけライトウェイトに…。と、がんばっても、どうしても気になるものの一つがバリデーション。些末なことだけどバリデーションはれっきとしたドメイン知識。これだけ半端にフロントにいるの、気持ち悪いですよね？ 折角ドメイン知識をその他と分離するなら、フロントとバックでもそれらを共通化したい！できるんです。そう、Full-Stack JavaScriptでの開発なら。 結論 こんなアーキテクチャを
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
Vue vuexでfirebaseのログイン保持 - Qiita
移行しました 最新のVue3で書き直しました！Zenn Vue3でFirebaseログイン 以下は2年前の情報です。 Vueチュートリアル vuexでfirebaseのログイン保持 Vue.jsでfirebaseのログイン実装の記事はよく見かけますが、単一コンポーネント内での処理ばかりでした。 なので全体でログイン状態を共有できるようvuexを導入したいと思います。 vuexにデータを入れると、どのコンポーネントからでもアクセスできます。 Vueでプロジェクトの作成からやりたいと思っています。 DEMOページ ・ログイン及びログアウトボタンを表示するコンポーネント ・ユーザー情報を表示するコンポーネント 以上の2つで、vuexのデータへアクセスしています。 環境 node 8.11.4 npm 5.6.0 vue 3.0.1 npm install -g @vue/cli npm inst
VueJS, Vuex, Firestoreでリアルタイムチャットを実装
Last week Google’s Firebase platform released a new product, Cloud Firestore. Much like the Firebase real-time… 先週GoogleのFirebaseがCloud Firestoreという新製品をリリースしました。 Cloud FirestoreはFirebaseのリアルタイムデータベースとよく似ており、リアルタイムアプリケーションを構築するためのNoSQLベースのクラウドデータベースです。Firebaseへのクエリは複雑になりがちな問題などをCloud Firestoreを使うことで解決することができます。機能についての詳細ははこちらをみてください。 この記事ではVueとVuexとCloud Firestoreを使ってFirechatという簡単なリアルタイムチャットアプリケーション
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 - Qiita
はじめに 今流行りのJSフレームワークであるNuxt.js（ベースはVue.js）に、これまた今流行りのUIフレームワークであるBulmaを組み込む方法を試していたら、今までどんなに勉強してもイマイチよくわからなかったVuexストアの役割がストンと腑に落ちたというアハ体験をしましたので、みなさんと共有したいと思います 前提条件 macOS High Sierra v10.13.3 node.js v9.7.1 npm v5.7.1 yarn v1.5.1 node.js以下については、Homebrewを使ってインストールしました 新規プロジェクトを生成する create-nuxt-appコマンドを使います プロジェクト名はavocadoとします。特に意味はありません # これは以下のコマンド2つと同じ意味です yarn create nuxt-app avocado # 1/2 creat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js - mapGetters with Params - Rhys Williams
Practical usage of Mutation Types in Vuex
Pinia | The intuitive store for Vue.js
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
http://chibinowa.net/note/vuejs/vue-11.html
