導入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ブラウザ設定の新バージョンではクロスドメイン実装が可能
今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...
1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...
1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...
HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...
ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...
いいえnvmはnodejsの複数のバージョンを管理する役割を担っています。インストール: https...
1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...
目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...
コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...
1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...
ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...
1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...
ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...