Release v4.0.0 · vuejs/vuex
This is the official Vuex 4 release. The focus for Vuex 4 is compatibility. Vuex 4 supports Vue 3, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both Option and Composition API in the example directory. It's still released un
Full-Stack JavaScript meets DDD. - Qiita
これは 2020-01-10 に開催された、DDD meetup#3 でのLTの内容を記事化したものです。 Vuex+Express環境でどんなアーキテクチャを採用したか、して良かったこと／悪かったことを発表しました（LT資料はこちら）。 問題提起 フロントエンドでDDDを実践しようと考えて、結局採用を見送った経験のある方は以外に多いのではないでしょうか。ドメイン知識はバックエンドに集中させてフロントはできるだけライトウェイトに…。と、がんばっても、どうしても気になるものの一つがバリデーション。些末なことだけどバリデーションはれっきとしたドメイン知識。これだけ半端にフロントにいるの、気持ち悪いですよね？ 折角ドメイン知識をその他と分離するなら、フロントとバックでもそれらを共通化したい！できるんです。そう、Full-Stack JavaScriptでの開発なら。 結論 こんなアーキテクチャを
Vuex型推論・最終章 - vuex-guardian - - Qiita
Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、
Nuxt.jsのinjectを使ってDIする - CYDAS Developer's Blog
大阪からこんにちは、福山健（@kenfdev）です！ 先日「v-kansai Vue.js/Nuxt.js meetup #2」で「Nuxt.jsのinjectでインジェクトしてみる話」という内容で登壇させていただきました。その内容について記事にも残しておこうと思います。 スライドに関しては以下で公開しています。 speakerdeck.com 前提知識 基本的なNuxt.jsの機能 Vuexをなんとなく知っている TypeScriptがなんとなく読める Nuxt.jsの inject 皆さん、Nuxt.jsには inject という機能があるのをご存知でしょうか？意外と知られていないんじゃないかと思うのですが、公式ドキュメントの「統合された注入」にも記載されているNuxt.jsのプラグインの機能です。この inject を使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から
実践TypeScript - 内容のご紹介 -｜Takepepe
ここ最近、TypeScript の盛り上がりが本当にすごいですね。私ごとながら、昨年末からずっと書き続けていた TypeScript の技術書が、ようやく本日校了しました。Twitter で告知をしたところ、想像以上に反響があり驚いています。あれだけ高価な本、予約するには情報が不十分です。「買ってみたが期待はずれだった」という方が出ないよう、内容についてご紹介します。 対象読者もし皆さまが、体型的にアプリケーションを構築する術を身に付けたいと考えているなら、別途、書籍や文献をお求めください。本書は、JavaScript には存在しない、TypeScript 特有の知識を体系的に学ぶための一冊です。想定している対象読者は、ある程度 JavaScript でアプリケーションを作った経験がある方で、型の話がメインです。 本書の目的様々な事情から、TypeScript の現場導
Vue 2 + TypeScriptでVuexを使わないという選択肢 - Qiita
はじめに この記事はVueとTypeScriptの開発で状態管理について悩んでいる方へ，Vuexを使わないという選択をした場合どのように状態管理をしていくかを綴った記事です。 Vuexを否定することが目的ではありません，Vuexを使いたい場合は@tsrnkさんが書かれているこちらの記事のようにvuex-module-decoratorsを使う方法をおすすめします。 Vue 3ではComposition APIに ref, reactive が追加されたのでこちらを使いましょう。 何に悩んでいたのか TypeScriptとVuexは相性が悪く型安全性について度々問題にぶつかります。 厳密にはTypeScriptで書くVueとVuexの相性が悪いです。 そもVue 2.xはJavaScript製であり，もともとTypeScriptのような型安全を考慮した作りにはなっていません。 ですのでTyp
TypeScript で React + Redux と Vue + Vuex を書き比べる - 朝日ネット 技術者ブログ
はじめに 開発部の tasaki です。8 月の記事では TypeScript + React + Redux + React Router + α を使って 1 ファイルで完結する小さいアプリケーションを書きました。 techblog.asahi-net.co.jp 今回は TypeScript + Vue + Vuex + Vue Router の組み合わせで同じものを書き、2 つのライブラリの共通点と違いについて探ってみたいと思います。 このようなものを書いた主な理由は以下の 3 つです。 適度に小さく完備なアプリケーションの構成を作っておき、そのソースコード自体をチートシートとして使いたい React と Vue の共通点や差異について説明をする時に使える実例を用意しておきたい React や Vue を TypeScript から使う際の書き方を確立しておきたい 以下、実際にアプ
Large-scale Vuex application structures
Me trying to handle state and structure in large applications When writing large-scale applications, managing the state of the frontend can be quite hard. For Vue.js applications, for example, there is a plugin called Vuex that offers state management in a really simple way , and suggests using the following application structure: Vuex recommended application structure If you are curious about an
Vue のコンポーネントと Vuex Store を繋げるためのヘルパ vuex-connect を作った - Katashin .info
2016年4月24日JavaScript,Vue,Vuex,vuex-connect,ライブラリ某勉強会中にネタを思いついて、急いで作って LT してその日のうちに npm にアップしたら、翌日Vue 公式に紹介されていてだいぶビビったやつです。Vue と Vuex のヘルパなので、この二つを理解していることが前提になります。 vuex-connect (Github) vuex-connect (npm) vuex-connect の機能 #vuex-connect は connect 関数のみ提供しており、やっていることは react-reduxの connect と同じです。connect は第一引数に Vuex の getters、第二引数に actions を受け取ります。 また、戻り値として別の関数を返し、こちらの関数には、コンポーネント名と、コンポーネントのコンストラクタを渡
How to build a large Vue application
The MVVM of the Observable model gives Vue a natural advantage in small and medium-sized Web applications, but with the growing popularity of Vue, Vue’s use in large projects is slightly awkward. Obviously, in high complexity projects, type checking has become a required feature, and Vue2’s type checking support in TypeScript is not good enough, and importantly the modular design of Vuex’s state l
Nuxt.js で Vuex の結合テストを書く方法を考えた - kitak blog
この間、友人と焼き肉を食べていて、「Nuxt.js で Vuex の結合テスト書くのどうやってますか？」という話になったので、考えてみました。 Vuex の結合テストの定義 この記事では、アクションやミューテーション単体ではなく、 アクションをディスパッチした結果のステートやゲッターが意図通りになっているか確認するテストのことを、Vuex の結合テストと呼びます。 方針 Vuex の結合テストで課題となるのは、テスト対象の Vuex Store インスタンスの生成です。 今回は、（少し強引ですが）Nuxt.js のドキュメントのエンドツーエンドテストのサンプル( 開発ツール - Nuxt.js )をベースに Store インスタンスの生成を Nuxt.js に任せることにしました。 最初、モジュールモードの場合に Nuxt.js が内部でおこなっている Store オプションの組み立て(
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 | MMMブログ
TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker 目次 テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを使って見た目を含めてテストする。 ブラックボックステスト - 機能の実際の振る舞いをベースにテストする手法 ホワイトボックステスト - 機能のロジックや入出力をベースにテストする手法 これに加えて、フロントエンドのテストではブラウザ環境かNode環境かという違いも
vuex を typescript でタイプセーフに実装する - Qiita
目的 vuexをtypescriptでタイプセーフに実装したい ktsnさんの vuex-type-helper を使って実装しているのですがコンポーネントからステートやゲッターを参照しようとすると型付けができないので改良したい 前提 vue: v2.5.16 vuex: v3.0.1 vuex-type-helper: v1.2.0 ストアはモジュール単位で管理できるように namespaced: true で実装することを前提としています 1. ステートへのアクセスをタイプセーフにする this.$store.state では型がないので型付きで取得できるようヘルパーを実装します アイディアとしては モジュール名:ステートの型 のマッピングを定義しそれを利用して型付きでステートを取得するものです export class Todo { public text: string; publ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - danielroe/typed-vuex: 🏦 A typed store accessor for vanilla Vuex.
GitHub - ktsn/vuex-smart-module: Type safe Vuex module with powerful module features
VuexFireSQL
Vue.js+VuexでContainer Componentパターン | log.pocka.io
GitHub - kefranabg/bento-starter: :bento: Full-Stack solution to quickly build PWA applications with Vue.js and Firebase
GitHub - ktsn/vuex-connect: A binding utility for a Vue component and a Vuex store.
