Vuex環境の詳細な説明

Vuex環境の詳細な説明

Vuex環境を構築する

srcディレクトリにフォルダstoreを作成し、 storeフォルダにindex.jsファイルを作成します。

index.jsはVuexのコアストアを作成するために使用されます

// scr/vuex/index.js
 // Vuexをインポート
'vuex' から Vuex をインポートします
 // コンポーネント内のアクションに応答するために使用されます const actions = {}
// データを操作するために使用される const modifications = {}
// データの保存に使用 const state = {}
 // ストアを作成する
定数ストア = 新しい Vuex.Store({
    行動、
    突然変異、
    州
})
 // エクスポートストア
デフォルトストアをエクスポート
// メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'vuex' から Vuex をインポートします
'./store/index' からストアをインポートします
 Vue.use(Vuex)
 新しいVue({
    レンダリング:h => h(アプリ)、
    店
}).$mount('#app')

しかし、これはエラーになります:

[vuex] ストアインスタンスを作成する前に Vue.use(Vuex) を呼び出す必要があります

意味: [vuex] ストアインスタンスを作成する前にVue.use(Vuex)を呼び出す必要があります

理由:ストアをインポートすると、インポートされたファイルのコードが最初に実行されるため、次のコードを実行すると、インポートされたファイルが実行されています。

この場合、次の2行のコードを交換しましょう: import store from './store/index'Vue.use(Vuex)

しかし、実際の結果は次のとおりです: [vuex] must call Vue.use(Vuex) before creating a store instance 、依然としてエラーが発生します。

理由: これは、スキャフォールドのインポート ステートメントの解析に関する問題です。インポートされたファイルはコードの先頭に配置され、このファイルのコードが解析されます。

正しい書き方:

// scr/store/index.js
 // VuexとVueをインポートする
'vuex' から Vuex をインポートします
'vue' から Vue をインポートします
 // Vuex プラグインを適用する Vue.use(Vuex)
 // コンポーネント内のアクションに応答するために使用されます const actions = {}
// データを操作するために使用される const modifications = {}
// データの保存に使用 const state = {}
 // ストアを作成する
定数ストア = 新しい Vuex.Store({
    行動、
    突然変異、
    州
})
 // エクスポートストア
デフォルトストアをエクスポート
// メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./store/index' からストアをインポートします
 新しいVue({
    レンダリング:h => h(アプリ)、
    店
}).$mount('#app')

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue Vuex は vuex 環境と vuex sum case 共有を構築します
  • Vue 初心者ガイド: 環境の構築と開始方法
  • Vueプロジェクト環境構築の詳細な概要
  • Vue開発環境を構築する
  • Vue環境の設定に関する簡単なチュートリアル
  • Vue2.0 ゼロから_環境構築手順
  • vue.js開発環境を構築するための最もシンプルな戦略の詳細な説明
  • Windows ベースの Vue.js ランタイム環境を構築してインストールするためのステップバイステップ ガイド
  • vue.js 開発環境の設定に関するチュートリアル
  • Vueプロジェクト環境構築

<<:  Linux ソースコードの解析 epoll

>>:  HTML におけるベースタグの使用に関する詳細な説明

推薦する

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...

Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト

最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...

リクエストを転送したり、静的リソースファイルにアクセスしたりする複数の場所への nginx の実装

この記事では主に、リクエストを転送したり、静的リソース ファイルにアクセスしたりする nginx の...

実用的な情報が満載のJavaScript Webフォーム機能通信

1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

Docker での Redis のマスタースレーブ構成チュートリアルの詳細説明

1. Redisイメージを取得するdocker pull redis 2. それぞれポート6379、...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

Mysql SSHトンネル接続を使用するための基本的な手順

序文セキュリティ上の理由から、MySQL の root ユーザーはローカルにのみログインでき、外部ネ...

Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...