(創作は簡単ではありません。ありがとうございます。皆さんのサポートが私が前進するための最大の動機です。読んで役に立った場合は、足跡を残してください)
目次
カスタム作成アイテム
目標: VueCli に基づいてカスタム プロジェクト シェルフを作成する
プロジェクトの作成を開始する
カスタム作成プロジェクトを選択します
ファイル内で構成する必要がある機能を選択します
バージョンを選択
履歴モードを選択するかどうか
CSSプリプロセッサの選択
ESLint 仕様を選択します
いつチェックを開始するかを選択してください
設定ファイルの保存場所を選択します
保存するかどうか
vuexの概要
1. それは何ですか:Vuexは Vue の 状態管理ツールであり 、状態はデータです。Vernacular: vuex は、次のような vue 共通データ (複数のコンポーネントによって共有されるデータ) の管理に 役立つプラグインです 。 ショッピング カート データ 個人情報データ2. シナリオ:① 特定の状態が 多くのコンポーネントで使用されている （個人情報）② 複数のコンポーネントが 共同で データを保持する（ショッピングカート）3. 利点:① データを共同で保持し、 データを一元管理する②対応的な 変化③ 簡単な操作（vuexはいくつかの補助機能を提供します）
vuex（マルチコンポーネントデータ共有）環境を構築する
この効果は 3 つのコンポーネントで構成され、1 つのデータを共有します。どのコンポーネントでもデータを変更できる3 つのコンポーネントのデータは同期されます
空の倉庫を作成する
// 这里存放的就是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
// 插件安装
Vue.use(Vuex)
// 创建仓库
const store = new Vuex.Store()
// 导出给main.js
export default store状態 状態
1. データを提供します。
State は唯一のパブリック データ ソースを提供し、すべての共有データは Store の State に保存される必要があります。状態オブジェクトに、共有したいデータを追加できます
2. 使用状況データ:
①店舗から直接アクセス
② 補助機能によるmapState は、ストア内のデータを コンポーネントの計算されたプロパティに 自動的にマッピングするのに役立つ補助関数です。
突然変異
目標: 状態データを変更するための突然変異の操作プロセスをマスターします。(状態データの変更は突然変異を通じてのみ行うことができます)
1. 状態を変更するメソッドを格納するミューテーション オブジェクトを定義します。
2. コンポーネント内でミューテーションを送信して呼び出す
コミットミューテーションはパラメータを渡すことができる` this.$store.commit('xxx',parameter) `です
1. ミューテーション機能の提供（パラメーター付き - ペイロードペイロードの送信）
2. ページ上でミューテーションを送信して呼び出します。
ヒント: 送信パラメーターは 1 つだけです。複数のパラメーターがある場合は、それらをオブジェクトにラップして渡します。
ヘルパー関数 - mapMutation
目標: 補助関数mapMutation、マッピング方法をマスターするmapMutations は、mapState と非常によく似ており、 ミューテーションにあるメソッドを 抽出し、それらを コンポーネント メソッド にマップします。
行動
目標: アクションの基本構文を明確にし、非同期操作を処理します。説明: 突然変異は同期的である必要があります (データ変更の監視、デバッグの記録が容易です)1. アクションメソッドを提供する
2. ページ内で通話を発信する
ヘルパー関数 - mapActions
mapActions は、アクション内にあるメソッドを抽出し、コンポーネント メソッドにマップします。
ゲッター
説明: 状態に加えて、状態から いくつかの状態を導出する必要がある場合があります 。これらの状態は状態に依存し、この時点ではゲッターが使用されます。目標: コアコンセプトのゲッターの基本構文をマスターする (計算されたプロパティと同様)例: リストは状態で定義されており、これは 1 ～ 10 の配列であり、コンポーネントでは 5 より大きいすべてのデータを表示する必要があります。
1. ゲッターを定義する
2. アクセスゲッター①ストア経由でゲッターにアクセス
②補助関数mapGetterによるマッピング
モジュール module (高度な構文)
vuex は 単一の状態ツリーを使用するため 、アプリケーションのすべての状態が 比較的大きなオブジェクトに集中します 。
アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。(Vuex はプロジェクトが大きくなるにつれて保守が難しくなります)
モジュール分割:
ユーザーモジュール:store/modules/user.js
アクセス構文状態
目標: モジュール内の状態のアクセス構文をマスターするモジュールに分割されていますが、サブモジュールの状態は依然としてルートレベルの状態にリンクされており、属性名はモジュール名です。モジュールからのデータを使用します。①モジュール名から $store.state.modulename.xxxに直接アクセスします。②mapStateによるマッピングデフォルトのルートレベルマッピング mapState([ 'xxx' ])サブモジュール マッピング mapState('モジュール名', ['xxx']) - 名前空間を開く必要があります
アクセス構文 -ゲッター
目標: モジュール内のゲッターのアクセス構文をマスターするモジュール内のゲッターからのデータを使用します。① $store.getters['モジュール名/xxx'] にモジュール名で直接アクセス②mapGetterによるマッピングデフォルトのルートレベルのマッピング mapGetters([ 'xxx' ])サブモジュール マッピング mapGetters('モジュール名', ['xxx']) - 名前空間を開く必要があります
アクセス構文 -突然変異
目標: モジュール内のミューテーションの呼び出し構文をマスターする注: デフォルト モジュールのミューテーションとアクションはグローバルにマウントされるため、 サブモジュールにマウントする前に 名前空間を有効にする必要があります。サブモジュールでミューテーションを呼び出します。①store経由で$store.commitを直接呼び出します （'モジュール名/xxx'、追加パラメータ）②mapMutationによるマッピングデフォルトのルートレベルのマッピング mapMutations([ 'xxx' ])サブモジュール マッピング mapMutations('モジュール名', ['xxx']) - 名前空間を開く必要があります
アクセス構文 -アクション
目標: モジュール内のアクションの呼び出し構文をマスターする (同様に、突然変異への直接の類似で十分です)注: デフォルト モジュールのミューテーションとアクションはグローバルにマウントされるため、 サブモジュールにマウントする前に 名前空間を有効にする必要があります。サブモジュールでアクションを呼び出します。①ストア経由で $store.dispatch('モジュール名/xxx ', 追加パラメータ) を直接呼び出します。②mapActionによるマッピングデフォルトのルートレベルのマッピング mapActions([ 'xxx' ])サブモジュール マッピング mapActions('モジュール名', ['xxx']) - 名前空間を開く必要があります