導入Vuex はコンポーネントのグローバルな状態 (データ) を管理するための仕組みで、コンポーネント間のデータ共有を簡単に実現できます。 始めるインストール①直接ダウンロードする方法vuex.js ファイルを作成し、URL ②CND法<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> ③NPM方式npm インストール vuex --save ④糸法糸を追加するvuex NPMインストールの使い方1. scr ファイルに store/index.js フォルダーを作成し、次の内容を記述します。 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) デフォルトの新しいVuex.Storeをエクスポートします({ 州: {}、 変異: {}, アクション: {}, モジュール: {} }) 2. main.jsにインポートし、Vueインスタンスにマウントします。 'vue' から Vue をインポートします './store' からストアをインポートします 新しいVue({ レンダリング: h => h(App), 店 }).$mount('#app') 店舗コンセプトと利用方法コンセプト:コンポーネント間でデータを共有するために使用されます。 ストア内のデータを変更できるのはミューテーションのみです。 使用: 使用前に定義する 意味州: { 番号: 0 } 使用方法1(推奨) <div>{{ numAlias }}</div> 'vuex' から { mapState } をインポートします。 エクスポートデフォルト{ //計算関数が計算されます: mapState({ // 文字列パラメータ 'count' を渡すことは `state => state.count` と同等です numAlias: 'num', // 共通キーは自分で付ける名前、値は受け取るデータです // 矢印関数を使用するとコードをより簡潔にすることができます count: state => state.count, // `this` を使用してローカル状態を取得できるようにするには、通常の関数 countPlusLocalState (state) { を使用する必要があります。 state.count + this.localCount を返す } //他の計算関数を定義することもできます}), // または次のように // 計算された関数は次のように計算されます: { mapState(['count']) } } 方法2 <div>{{ $store.state.count }}</div> 突然変異の概念と使用法コンセプト:ストア内のデータを変更します。他の場所のデータの変更は厳禁です。ミューテーションでは非同期操作を実行しないでください。 ミューテーションは同期的に実行する必要があり、非同期的に実行することはできません。 使用:使用する前にメソッドを定義する 意味突然変異: //カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) { // 状態の変更 state.num++ } } 使用方法1(推奨) 'vuex' から { mapState, mapMutations } をインポートします。 //メソッド: { ...mapMutations([ // ミューテーションカスタムメソッド名 'increment' ])、 愛() { // 直接 this.increment('渡す必要のあるデータは必要ありません') を呼び出します this.increment('ビン') } } 方法2 メソッド: { 愛() { // this.$store.commit('カスタム名', '渡されたデータは渡されない可能性があります') this.$store.commit('増分', 'データ') } } アクションの概念と使用法コンセプト:非同期操作を処理するために使用されます。 非同期操作を通じてデータを変更する場合は、ミューテーションではなくアクションを使用する必要があります。ただし、アクションでミューテーションをトリガーして間接的にデータを変更する必要があります。 アクションは、次の点を除いて、ミューテーションに似ています。
意味突然変異: //カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) { // 状態の変更 state.num++ } }, アクション: { //カスタムメソッドを追加します。コンテキストはパラメータなので、vuexのインスタンスとして扱うことができます。add(context) { //context.commit('ミューテーションで呼び出されるメソッド') を使用できます context.commit('増分') } } 使用方法1(推奨) 'vuex' から { mapState、mapMutations、mapActions } をインポートします。 エクスポートデフォルト{ メソッド: { ...マップアクション([ 'add', // `this.add()` を `this.$store.dispatch('add')` にマップします // `mapActions` はペイロードもサポートします: 'add' // `this.add(amount)` を `this.$store.dispatch('add', amount)` にマッピングします ])、 ...マップアクション({ add: 'add' // `this.add()` を `this.$store.dispatch('increment')` にマップします })、 愛() { // this.add('渡す必要のあるデータは必要ありません') を直接呼び出します this.add(データ) } } } 方法2 メソッド: { 愛() { // this.$store.dispatch('カスタム名', '渡されたデータは渡されない可能性があります') this.$store.dispatch('add', データ) } } ゲッターの概念と使用コンセプト:Getter は、ストア内のデータを処理して新しいデータを作成するために使用されます。 Getting は、Vue の計算省略形と同様に、ストア内の既存のデータを処理して新しいデータを形成できます。 意味州: { 番号: 0 }, ゲッター: { 完了Todos: 状態 => { 状態.num = 10 を返す } } 使用方法1(推奨) <div>{{ 完了したすべての作業 }}</div> 'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。 エクスポートデフォルト{ //計算関数が計算されます: { ...mapState(['count'])、 ...mapmapGetters(['doneTodos']) } } 方法2 <div>{{ $store.getters.doneTodos }}</div> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能
webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...
目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...
目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...
序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...
XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...
この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...
目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...
--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...
目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...
HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...
Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...
目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...
エラーは次のとおりです:キャッチされない TypeError: 未定義のプロパティ 'mod...