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 プロセスの CPU 使用率が高い場合の解決策

目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...

CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...

繰り返し送信、繰り返し更新、バックオフ防止に関する問題と解決策の分析

1つ。序文<br />この種の質問は、どの専門掲示板でも見かけます。Google で検索...

MySQL DATE_FORMAT関数の使用

タオバオが、ダブル11に最も多くの注文をした2人のユーザー、ユーザー1:「ショッピングの皇帝、陳哈哈...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...

Docker はクラスター MongoDB 実装手順を構築します

序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...

Dockerコミットの使い方の詳しい説明

場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...

横スクロールウェブサイトデザインの概要

水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...

過去の Linux イメージの問題を修正するためのサンプル分析

過去の Linux イメージに関する問題を修正従来の Linux イメージで作成された ECS クラ...