Vuexはもう古い！？これからの状態管理はPiniaを使おう - Qiita
はじめに 煽り気味のタイトルですみません。Vuexは使わない方がいいという話ではなく、別の有力な選択肢が出てきたというレベルの話であると最初に断っておきます。 みなさん、Piniaという状態管理ライブラリをご存知ですか？僕は昨日知りました。 調べてみるとどうやら先月Vueの公式リポジトリ入りをしており、今後さらに注目が集まるライブラリになりそうです。 * ちなみにPiniaはVuexを置き換えるものではなく、Vuexは今後も開発を継続していくようです（現在はVuex5を開発中）。 Vueの状態管理といえばVuexというイメージがありますが、TypeScriptとの相性が良くないだとか、そもそも冗長だとかで長らくVue3時代の状態管理のベストプラクティスがよくわからない状況が続いていました（？） 僕の知っている限りではVue状態管理の方法は 1. Vuex 2. provide/inject
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください！ まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前：</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
グローバルステート管理ライブラリである「Pinia」について - Qiita
はじめに 今回はグローバルステート管理ライブラリである「Pinia」について紹介と実際に自分で触ってみたいと思います。 興味を持ったきっかけとしては10月27日に開催された「v-tokyo オンライン Meetup#14」内で「Pinia」ライブラリの開発者である Posva氏の発表を聞き、複雑なコードを書かずともグローバルなステートの型安全を担保してくれるという魅力もさることながら、「アイコンが可愛い！！」と思って大変興味を持ちました。 Pinia ドキュメント Piniaとは まずPiniaとは、Vue.js向けの状態管理ライブラリであり、階層が深くなったコンポーネント間でデータの共有ができるものです。Vuexと同様にコンポーネント間で状態の受け渡しが容易になるため、ある程度規模の大きい開発において威力を発揮する反面、小規模な開発or個人開発でもTypeScriptのフルサポート・記述
【Vue.js 3】書籍等にはあまり載ってなかった（と思う）こと5つ - Qiita
<template> <div :class="['child', modifier]"> // コンテンツ </div> </template> <script> export default { props: { modifier: String, }, } </script> 今回 CSS 設計は FLOCSS を参考にした別ディレクトリで管理していましたので、このようなケースが発生しました。 このような場合は props で値を受け渡して、class を bind させればいいですね。 Child.vue で設定しておきたいクラス名がある場合は、上記のような形で配列にしておけばいいですし、条件によってクラスを付け外しする場合はオブジェクトにするケースもあります。 また、SFC 内で CSS が完結していると記述は変わってくると思いますし、カプセル化された Web Component
[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う - Qiita
createNamespacedHelpersの使い方に関してはこちらの記事をご参照ください。 [Vuex]ヘルパー関数createNamespacedHelpersの使い方 createNamespacedHelpersを複数のstoreから使用するには以下のように記述します。 <script> import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge') // Hoge.jsのStateとActionsを使う const { mapState: mapStateOfFuga, mapActions: mapActionsOfFuga } = createNamespacedHelpers('fuga/Fuga') /
![[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ce29ca9ddb12535ab2a141c4a1c7bfa348c2c6ce/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVleCU1RCVFMyU4MyU5OCVFMyU4MyVBQiVFMyU4MyU5MSVFMyU4MyVCQyVFOSU5NiVBMiVFNiU5NSVCMGNyZWF0ZU5hbWVzcGFjZWRIZWxwZXJzJUUzJTgyJTkyJUU4JUE0JTg3JUU2JTk1JUIwJUUzJTgxJUFFc3RvcmUlRTMlODElOEIlRTMlODIlODklRTQlQkQlQkYlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWY1OTgxODgwNWJkODNmNTNmYzRkOGQyM2Q0OWUyZjkz%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDAwMF9fJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02NzdkYzM1ODUzZGE1NjBlY2I3NDA3MzlhOTZkMDljYg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gRmx1dHRlcuWkp-Wtpg%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D1d2c12b024f6763f14c5410ab58a7e8a)
Vuexのヘルパー関数createNamespacedHelpersの使い方 - Qiita
createNamespacedHelpersを使用することで名前空間付けされたヘルパーを作成できる。 <script> import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge') // Hoge.jsのStateとActionsを使う export default { computed: { ...mapState([ 'aaa', 'bbb' ]) }, methods: { ...mapActions([ 'ccc', 'ddd' ]) } } </script> import { createNamespacedHelpers } from 'vuex' でVuexをインポートし、createNamespace
【Vuex】Stateを丸ごと置き換える - Qiita
export default { replaceState (state, { value }) { Object.assign(state, value) } }
Vuexでネストしたデータに悩まされている方に知って欲しいnormalizr - Qiita
はじめに Vuexを使用している時に、ネストしたデータを非常に扱いにくいと感じたことはないでしょうか？ 今回はそういった悩みを持って開発をしている人向けにnomalizrを紹介していきたいと思います。 normalizrとは https://github.com/paularmstrong/normalizr ↑が公式のライブラリで 下記のように記載してあります。 Motivation Many APIs, public or not, return JSON data that has deeply nested objects. Using data in this kind of structure is often very difficult for JavaScript applications, especially those using Flux or Redux. So
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
Vuexのgettersを使う時の注意点についてまとめてみた - Qiita
はじめに Vuexの state をアクセスする方法には2つあります。 1. 直接 this.$store.state.xxx などで直接 state にアクセスする 2. Vuex.getters (以下、getters) を用いて state にアクセスする どちらの方法でも state にアクセスできますが、getters をどう使い分けをしたらいいのか、自分の中で理解できなかったので調べてみました。 getters について Vuex 公式ドキュメントには次のように書かれています。 Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。 ～ 中略 ～ プロパティとしてアクセスされるゲッタ
【Vue】リロードしても大丈夫。そう、vuex-persistedstateならね。 - Qiita
Vuexで管理しているステートをリロードしても消えないようにする vuex-persistedstateというVeux関連パッケージの紹介記事です。すでに同様の記事はありますが、備忘録として自分でまとめた物を残しておきます。 【Vuex】リロードしてもStateの中身を消さずに維持する方法 Vue基礎：Vuexの永続化対応 Vuexではリロードするとステートは初期状態にもどってしまう VuexはVueインスタンスがもつステート（データ）をストアと呼ばれる管理場所で一括管理して、全てのコンポーネント間でステートを簡易に共有する仕組みを提供してくれます。つまり、あるコンポーネントでステートの値を変更して、他のコンポーネントでそのステートをストアから取得して使うことができます。 しかし、メモリ上に保存されたVeuxのステートはブラウザを閉じたり、リロードしたりすると初期状態にリセットされてしまい
Vuexでstoreのstateを初期化する - Qiita
はじめに Vuexを使用しているとき、ログアウト処理などでstoreのstateを初期状態に戻したいことがあると思います。いくつかやり方はあると思うのですが、私が手軽だと思った情報を記載します。 方法 こんな感じです。実際に利用する際はactionsなどから呼び出すことになると思いますが、ここでは最低限のコードのみ記載しています。 こちらを参考にしました。参考というよりそのまま持ってきただけですが。。 // stateの初期値としたい任意のデータを定義する function getDefaultState() { return { idToken: null, uid: null } } // stateを初期化する export const state = getDefaultState() export const mutations = { // stateを初期化するmutatio
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita
2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いません。 実際のコードの書き方にも触れません。 Vuexを使ってはいるけど理解できなくて苦しんでいる方向けの内容です。 なぜVuexを使うのか Vuexの図解に入る前に、私がVuexを使っている理由を説明しておきます。 Vuexのメリットが明確でないと図があっ
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Vuex] <select> タグで 配列の state を v-model したい。。。[HACK] - Qiita