Vue でグローバル console.log スイッチを制御する方法

この記事では主に、Vue が URL パラメーターに基づいてグローバル console.log スイッチを制御する方法について詳しく紹介します。この記事は、あらゆる人の学習や作業に必要な学習の参考になります。友達、一緒に見てみましょう。

はじめに

最近 Vue を勉強しているのですが、インターネット上に関連する情報がほとんどないので、この記事では主に Vue でパラメータを渡して制御する方法についてまとめたいと思います。グローバル console.log スイッチ。関連するコンテンツは全員の参照と学習のために共有されます。以下ではこれ以上は説明しません。詳細な紹介を見てみましょう。

実装方法は次のとおりです:

プロジェクトの console.log に多くの情報が記録されるが、本番環境に送信するときに情報を出力したくない場合は、グローバル変数 (例: debug、

)

正規表現を使用してパラメータを照合します:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};

リンクにこのパラメータが含まれている場合は、デバッグ ステータスを true に設定します。それ以外の場合、console.log は通常の印刷可能なステータスになります。 console.log 関数:

console.log = function () {
 return false;
}

このときのグローバル変数は、一部のデバッグ ウィンドウの表示と非表示を制御するためにプロジェクト全体で使用できます。

Vue では、stores/index.js に直接記述することもできます。もちろん、他のエントリ ファイルに記述することもできます:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};
/* 若链接后面带上参数 envFlag=monitor
 * 则将 debug 置为true，否则置为false
*/
const monitor = 'monitor';
const envFlag = getQueryStr('envFlag');
let debug = monitor ? true : false;
if (envFlag === 'monitor') {
 console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");
 debug = monitor;
} else {
 debug = '';
 console.log = function () {
 return false;
 }
}
const state = {debug: debug};
export const store = new vuex.Store({state, mutations});

このとき、コンポーネントの表示または非表示を制御したい場合は、 vuex のゲッターを使用するだけです。 変数 debug を宣言することで使用できます。

<monitor v-show="debug"></monitor>
vuex: {
 getters: {
 debug: state => state.debug
 }
}

上記の作業が完了したら、URL の後にパラメータを配置します。 コンソールを開くと、コンポーネント モニターが表示されていることがわかります。同時に、プロジェクトのすべてのコンソールの .log 情報を確認できます。 envFlag=monitor

上記は私があなたのためにまとめたものです。

関連記事:

WeChatミニプログラムで画像切り替え表示を実現するスワイパーコンポーネントの使い方

vue2.0でよく使われるUIライブラリは何ですか?

C#で文字を整数に変換する方法

vue2.0とanimate.cssをマージする方法(詳細なチュートリアル)

以上がVue でグローバル console.log スイッチを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。