1 - 14 件 / 14件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
業務委託で STORES の開発をしている @inouetakuya です。 下記の記事(2020年09月14日)にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia(ピーニャ)は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
JSer.info #526 - npm 7が正式リリースされました。 npm install --global npm で npm 7がインストールされるようになっています。 npm 7がNode.jsに同梱されるのは、Node.js 15からになります。 npm 7 is now generally available! - The GitHub Blog Presenting v7.0.0 of the npm CLI - The GitHub Blog npm 7ではpackage-lock.jsonのフォーマットが変更されています。 あわせてyarn.lockファイルのサポートが追加されています。 その他の破壊的として、peerDependenciesが自動インストール、npxコマンドの変更、npm auditの出力形式変更などが含まれています。 機能追加としては、acceptD
今月初めにリリースされた Vuex4 を Composition API + TypeScript で試してみたのでそのメモです。 この記事は以下バージョンにて検証しています。 vuejs/vue 3.0.5 vuejs/vuex 4.0.0 Vuexとは? Vuex は、Vue.js 公式の状態管理ライブラリです。 Vue アプリケーション内に、どの階層のコンポーネントからでもデータを取得・更新できる単一のデータストアを作ることができます。Vuex を使うことで複数のコンポーネントで使う共有データの Props/Emit による過剰なバケツリレーが不要になります。 また、複雑になりがちな状態管理において以下の図のように特定のルールで制約を与えることでデータの流れを一元化して、コードの構造と保守性を向上させることができます。 (What is Vuex?) 使い方 Vue CLI で Vu
Pinia は Vue.js 向けの状態管理ライブラリです。 昨年に知ったときは「experimental なプロジェクト」という注意書きがあったのですが、先月にその表記がなくなっていたので少し触ってみました。 (ちなみにスペイン語でパイナップルの意味だそうです)
はじめに 現在リリースされている Vuex の最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのバージョンであり、 Vuex 3 と同じ API となっています。 そのために現状 Vuex の問題点としてよくあげられている TypeScript サポートの問題点を解決できていません。 Vuex 5 は Vue 3 において Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。 Vuex 5 は以下の点にフォーカスしています。 グローバルな状態を定義する コードの分割 SSR サポート Vue Devtools のサポート 拡張性 「グローバルな状態を定義する」「コードの分
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
2020年07月13日Options APIを使用してNuxt.js + TypeScriptでVuexに型指定する方法(nuxt-typed-vuex) はじめにこんにちは。エンジニアリング事業本部の@gc_tech70です。 今回自社内で新規のWebサービスの開発プロジェクトがあり、その際の開発技術としてNuxt.js + TypeScriptを採用しました。 本記事ではその開発時のナレッジとして、Nuxt.js + TypeScript環境におけるVuexの型指定の方法についてご紹介させていただきたいと思います。 ※(注記)TypeScriptを使用する理由は多くの記事で語られていると思いますので、この記事ではあえて言及はしません。 Nuxt.js + TypeScriptでの技術選定まず最初にNuxt.js + TypeScriptと言っても現状(2020年7月12日時点)では技術選定として
Nuxt を用いてグローバルな状態管理を行う場合、一般的な選択肢は Vuex かと思います。 一方で Vuex を使って状態管理をしようとすると、TypeScript による型の恩恵を受けにくいというデメリットがあります。昨今は Vuex 4 系での TS 対応など、以前に比べると環境が改善されてきている印象ですが、それでも完全とはいえない状態です。 というわけで Vuex に代わる TS と相性が良い状態管理の方法を調べていたのですが、nuxt-typed-vuex が良さそうという結論になりました。 ドキュメント: nuxt-typed-vuex リポジトリ: danielroe/typed-vuex: 🏦 A typed store accessor for vanilla Vuex. nuxt-typed-vuex とは? nuxt-typed-vuex は内部を見た感じ Vue
この記事は 2020年03月16日 のものです。最新の情報はpiniaの公式リポジトリ からご確認ください 注意: piniaリポジトリを斜め読みしただけなので大したこと書いていない けど vuex だとどうしても不便な場合があるので、 reactive(Vue.observable)によるVanilla State Managementや、 pinia みたいな方法でtype-safeなStoreレイヤーほしいよね. そんな気持ちの人が増えたらいいよね! 宮ちゃん! 話のコンテキスト 今現在 Vue(2.x), vuexを使っているプロジェクトでの利用を想定。 わりとごりごりしたフロントエンド。 エンドユーザーが触る管理画面 がある 複数のvuexモジュールがある。namespaced true. vuexモジュール間でもアクセスしうる。(単方向) 徐々にTypescript + com
追記 最近では型安全にグローバルステートを扱える Pinia が登場しているので新規で使う場合は先にそちらを検討するのが良いと思います。一方、Vuex からのマイグレーションは結構大変っぽいので、既存の Vuex リソースで型付けをしたいと考えているならこの記事で紹介している vuex-typing やその他の選択肢も選択肢になりそうです。 Vuex を仕事で使う機会がありそうなので勉強していたんですが、型付けのサポートが不十分で不満があったので型付けするためのヘルパーライブラリを作りました リポジトリ: https://github.com/d-kimuson/vuex-typing npm: https://www.npmjs.com/package/vuex-typing Vuex の型定義が不十分 アプリケーションがいずれ肥大化することを考えれば、はじめからモジュールに分けて管理す
はじめに こちらの記事で紹介したように、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
Vue.jsのVuexライブラリを使ってタスク管理掲示板アプリを作成し、Vue.jsとVuexの基本的な使い方を学ぶ。リストとタスクカードの作成・削除、ドラッグ&ドロップ機能も実装。また、VueのデバッグができるVueDevtoolの使い方や、Vue.js開発でよく出会うエラーの解決フローも解説。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く