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 を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

Linux システムの .bash_profile ファイルの詳細な説明

目次1. 環境変数$PATH: 2. 環境変数を変更します。 3. bash_profileの目的要...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

完全なショッピングカートを実装するためのミニプログラム

ミニプログラムは、参考までに完全なショッピングカート[すべて選択/選択解除して金額を計算/加算と減算...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...

Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...

HTML での位置の使用に関する簡単な紹介

昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。 作っ...

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...

CSSセレクタを使用してラベルスタイルを設定するサンプルコード

CSS セレクターHTML タグにスタイルを設定すると、タグの属性を設定できます。 <div ...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

WeChatアプレットで数字当てゲームを実装する実際のプロセス

目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...

TomcatのmaxPostSize属性を設定する際に注意する必要がある問題を解決する

必要:近い将来、大容量ファイルのアップロード機能を実装します。フロントエンドフレームワークのアップロ...

MySQL から Excel にテーブルデータをエクスポートする際の日時形式に関する簡単な説明

最近、MySQL を使用してテーブル データを Excel ファイルにエクスポートしました。MySQ...

CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...