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 におけるベースタグの使用に関する詳細な説明

推薦する

Dell R720 サーバーに Windows Server 2008 R2 をインストールする方法

注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...

k8sとDockerの関係についての簡単な説明

最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...

Docker のインストールと構成コマンドのコード例

Dockerのインストール依存パッケージをインストールする sudo yum install -y ...

MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明

序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...

MySQL トランザクション分離レベルの原則例分析

導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Linuxコマンド履歴の調整方法の詳細な説明

Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

HTML+CSSプロジェクト開発経験概要(推奨)

ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例

目次ネイティブJavaScriptとはA. 新しいブラウザでnullオブジェクトをチェックするコンス...