1. はじめにVuex のより専門的な紹介を見てみましょう。
つまり、Vuex はグローバル オブジェクトのような形式を使用して、すべてのコンポーネントの共通データを管理します。このグローバル オブジェクトのデータを変更したい場合は、Vuex が提供する方法で変更する必要があります (任意の方法で変更することはできません)。 2. 利点Vuex の状態管理と従来のグローバル変数の使用の違い:
3. 使用手順1. Vuexをインストールするnpm インストール vuex --save 2. Vuexを参照する'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) 3. 倉庫ストアを作成するVuex を使用するには、ウェアハウスと呼ばれるインスタンス //ストアを作成する Vuex のインスタンスを新規に作成します。 4. 含まれるモジュール
Vuex の役割は、グローバル オブジェクトの役割に似ています。Vuex は単一の状態ツリーを使用し、オブジェクト State を使用してアプリケーション階層全体のすべての状態を格納します。これらの状態は、グローバル変数とデータの集合として理解できます。 1. 状態グローバル状態 //ストアを作成する 定数ストア = 新しい Vuex.Store({ //state はアプリケーション層の状態を格納します:{ count:5 //合計: 5 } }); 2. ゲッター
定数ストア = 新しい Vuex.Store({ //state はアプリケーション層の状態を格納します:{ count:5 //合計: 5 }, ゲッター:{ newCount:state => state.count * 3 } }); コンポーネントを取得する エクスポートデフォルト{ 計算: { 新しいカウント(){ this.$store.getters.newCount を返します。 } } }; 3. 突然変異
我々は、 最初のパラメータとして 定数ストア = 新しい Vuex.Store({ //state はアプリケーション層の状態を格納します:{ count:5 //合計: 5 }, // ミューテーションは状態ミューテーションでデータを変更する唯一の方法です:{ 増分(状態、値) { 状態.count += 値; } } });
メソッド: { getVal(イベント) { //現在のキー値を取得します。let value = event.target.dataset.value; // commit 経由で increment という名前のミューテーションを送信します this.$store.commit("増分", 値); } } コンポーネントを取得する エクスポートデフォルト{ 計算: { カウント(){ this.$store.state.count を返します。 } } }; 4. アクション
デフォルトの新しいVuex.Storeをエクスポートします({ //データ状態を保存する: { オブジェクト: {}, }, //4. コミットミューテーションのメソッドを使用してミューテーションを処理する: { getParam(状態、オブジェクト) { //5. 状態のデータを変更する state.obj = Object } }, //2. ディスパッチアクションによって渡されたメソッドとパラメータを受け入れます: { getParamSync(ストア、オブジェクト) { // 非同期操作を処理する setTimeout(() => { //3. getParam というミューテーションをコミットで送信する //アクション関数はストアインスタンスオブジェクトを受け取るので、store.commitを呼び出して変更をコミットすることができます。 store.commit('getParam', オブジェクト); }, 1000) } } }) その後、コンポーネント内でそれを呼び出すことができます。 メソッド: { getVal() { 名前を 'xia' にします。 年齢を '26' とします。 sex = 'man' とします。 //1. getParamSyncメソッドと複数のパラメータ{name, age, sex}をディスパッチを通じてアクションに渡す this.$store.dispatch('getParamSync',{名前、年齢、性別}) } } 5. モジュールプロジェクトの複雑さが増すにつれて、Vuex の管理を容易にするために、将来の管理を容易にするために、一般的には機能に応じてさまざまな 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします './state' から状態をインポートします './mutations' から変異をインポートします './actions' からアクションをインポートします './getters' から * をゲッターとしてインポートします。 moduleA を './module/moduleA' からインポート // モジュール A moduleB を './module/moduleB' からインポート // モジュール B Vue.use(Vuex) デフォルトの新しいVuex.Storeをエクスポートします({ 行動、 ゲッター、 州、 突然変異、 モジュール: モジュールA、 モジュールB } })
// 各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあります export default { 州: { テキスト: 'モジュールA' }, ゲッター: {}, 変異: {}, アクション: {} } その後、コンポーネント内でそれを呼び出すことができます。 <テンプレート> <div class="demo"> <h1>{{getText1}}</h1> <h1>{{getText2}}</h1> </div> </テンプレート> 計算: { getText1(){ this.$store.state.moduleA.text を返します。 }, // または ...mapState({ getText2: 状態 => state.moduleB.text; }) } このことから、モジュール内の状態はローカルであり、モジュール自体にのみ属しているため、外部からは対応するモジュール名を介してアクセスする必要があることがわかります。 5. Vuexの最もシンプルなプロジェクト例vuex 構文シュガー 1. データの保存.vue ファイル import { mapMutations } from "vuex"; // mapMutations をインポートする エクスポートデフォルト{ メソッド: { ...mapMutations({ // ミューテーション内の SET_NEWS に changeNews を関連付けます changeNews: "SET_NEWS" })、 提出する(){ // changeNewsという名前のミューテーションを送信し、パラメータvalを渡します let val = 'テストニュース'; this.changeNews(val); // this.$store.commit("changeNews", val); と同等 } } } 2. データを取得するb.vue ファイル import { mapGetters } from "vuex"; // mapGetters をインポートする エクスポートデフォルト{ 計算: { // vuex を使用してデータを読み取ります (getters.js 内のデータが読み取られます) // this.$store.getters.news と同等 (vuex 構文シュガー) ...mapGetters(["ニュース"]) }, 作成された() { // ゲッターでニュースデータを取得します console.log(this.news); } } 3. ファイルのディレクトリ構造を保存するインデックス'vue' から Vue をインポートします 'vuex' から Vuex をインポートします './state' から状態をインポートします './mutations' から変異をインポートします './actions' からアクションをインポートします './getters' から * をゲッターとしてインポートします。 //状態が変更されるたびに、ログがコンソールに表示されます 'vuex/dist/logger' から createLogger をインポートします。 Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' デフォルトの新しいVuex.Storeをエクスポートします({ 行動、 ゲッター、 州、 突然変異、 strict: debug, // debug=true の場合、厳密モードを有効にします (パフォーマンスの低下) プラグイン: デバッグ? [createLogger()]: [] }) 状態.js定数状態 = { ニュース: {} } デフォルト状態をエクスポートします。 変異.jsconst 変異 = { SET_NEWS(状態、値) { 状態.ニュース = val } } デフォルトのミューテーションをエクスポートします。 アクション//非同期処理 const actions = { M_NEWS({コミット}, val) { commit('SET_NEWS', val); // ミューテーションをコミットする } } デフォルトのアクションをエクスポートします。 ゲッターズ//通常はゲッターを介してデータを取得します (this.$store.getters.news;) export const news = state => state.news // 他の処理を行わずに直接マップします 4. ストアの利用
import store from './store' //vuexストレージファイル new Vue({ el: '#app', ルーター、 店、 コンポーネント: アプリ }, テンプレート: '<App/>' }) Vuex の全体的な事例の詳細説明については、この記事で終わります。より関連性の高い Vuex コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Ubuntu 20.04 LTS で Java 開発環境を構成する
オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...
目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...
VirtualBox をインストールした後、CentOS 7 をインストールします。ここでは詳細には...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...
序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...
背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...
フロントエンド開発者が習得する必要のあるスキル。これらのスキルにより、フロントエンド開発者の価値は数...
目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...
序文以前、MySQL 5.6 をインストールしました。3 か月後、開発者から MySQL で JSO...
!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...
この記事では、参考までに、計算機を実装するためのWeChatアプレットの具体的なコードを紹介します。...
置換を削除したり文字列を削除したりできる tr コマンドは、誰もがよく知っています。 英語では、英語...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...