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

推薦する

スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル (Windows 版)

1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...

Nginx の起動に失敗した場合のいくつかのエラー処理の詳細な説明

Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

Linux でプロセスを隠す方法と、遭遇する落とし穴

序文1. この記事で使用したツールは、https://github.com/gianlucabore...

Centos7 システムに k8s クラスターを展開するための詳細な紹介

目次1 バージョンと計画1.1 バージョン情報: 1.2 クラスター計画2. 展開1. ファイアウォ...

Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス

後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...

Linux で Multitail コマンドを使用するチュートリアル

MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

自作の Windows サーバーに egg アプリケーションを展開する方法 (画像とテキスト付き)

1. IEブラウザを使用してVPNにログインする 2. リモートログイン 3. サーバーに最新のn...

jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...

Dockerコンテナでアプリケーションサービスを自動的に起動する方法の例

コンテナの起動時に Docker コンテナ内のアプリケーション サービスを自動的に起動する場合。 D...