はじめに 煽り気味のタイトルですみません。Vuexは使わない方がいいという話ではなく、別の有力な選択肢が出てきたというレベルの話であると最初に断っておきます。 みなさん、Piniaという状態管理ライブラリをご存知ですか？僕は昨日知りました。 調べてみるとどうやら先月Vueの公式リポジトリ入りをしており、今後さらに注目が集まるライブラリになりそうです。 * ちなみにPiniaはVuexを置き換えるものではなく、Vuexは今後も開発を継続していくようです（現在はVuex5を開発中）。 Vueの状態管理といえばVuexというイメージがありますが、TypeScriptとの相性が良くないだとか、そもそも冗長だとかで長らくVue3時代の状態管理のベストプラクティスがよくわからない状況が続いていました（？） 僕の知っている限りではVue状態管理の方法は 1. Vuex 2. provide/inject
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」について紹介と実際に自分で触ってみたいと思います。 興味を持ったきっかけとしては10月27日に開催された「v-tokyo オンライン Meetup#14」内で「Pinia」ライブラリの開発者である Posva氏の発表を聞き、複雑なコードを書かずともグローバルなステートの型安全を担保してくれるという魅力もさることながら、「アイコンが可愛い！！」と思って大変興味を持ちました。 Pinia ドキュメント Piniaとは まずPiniaとは、Vue.js向けの状態管理ライブラリであり、階層が深くなったコンポーネント間でデータの共有ができるものです。Vuexと同様にコンポーネント間で状態の受け渡しが容易になるため、ある程度規模の大きい開発において威力を発揮する反面、小規模な開発or個人開発でもTypeScriptのフルサポート・記述
<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
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') /
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
export default { replaceState (state, { value }) { Object.assign(state, value) } }
はじめに 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
はじめに Vuexの state をアクセスする方法には2つあります。 1. 直接 this.$store.state.xxx などで直接 state にアクセスする 2. Vuex.getters (以下、getters) を用いて state にアクセスする どちらの方法でも state にアクセスできますが、getters をどう使い分けをしたらいいのか、自分の中で理解できなかったので調べてみました。 getters について Vuex 公式ドキュメントには次のように書かれています。 Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。 ～ 中略 ～ プロパティとしてアクセスされるゲッタ
Vuexで管理しているステートをリロードしても消えないようにする vuex-persistedstateというVeux関連パッケージの紹介記事です。すでに同様の記事はありますが、備忘録として自分でまとめた物を残しておきます。 【Vuex】リロードしてもStateの中身を消さずに維持する方法 Vue基礎：Vuexの永続化対応 Vuexではリロードするとステートは初期状態にもどってしまう VuexはVueインスタンスがもつステート（データ）をストアと呼ばれる管理場所で一括管理して、全てのコンポーネント間でステートを簡易に共有する仕組みを提供してくれます。つまり、あるコンポーネントでステートの値を変更して、他のコンポーネントでそのステートをストアから取得して使うことができます。 しかし、メモリ上に保存されたVeuxのステートはブラウザを閉じたり、リロードしたりすると初期状態にリセットされてしまい
はじめに Vuexを使用しているとき、ログアウト処理などでstoreのstateを初期状態に戻したいことがあると思います。いくつかやり方はあると思うのですが、私が手軽だと思った情報を記載します。 方法 こんな感じです。実際に利用する際はactionsなどから呼び出すことになると思いますが、ここでは最低限のコードのみ記載しています。 こちらを参考にしました。参考というよりそのまま持ってきただけですが。。 // stateの初期値としたい任意のデータを定義する function getDefaultState() { return { idToken: null, uid: null } } // stateを初期化する export const state = getDefaultState() export const mutations = { // stateを初期化するmutatio
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いま
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と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く