Vue の this.$store.state.xx.xx に関する簡単な説明

これを Vue.$store.state.xx.xx

this.$store.state.xx.xxは実際にはVueで使用される状態管理ツールVuexです。

Vuex 公式サイト: https://vuex.vuejs.org/zh/

コンポーネントの共有状態を抽出し、グローバルシングルトンモードで管理するようなものです。このモードでは、コンポーネント ツリーが巨大な「ビュー」を形成し、ツリー内のどこにあるコンポーネントでも状態を取得したり動作をトリガーしたりできます。 (プロジェクト内のどこからでもいつでも動的にアクセスして変更できます。変更後、Vue はプロジェクト全体を更新します)

ストアからデータを取得する

すべてのコンポーネントがストア内のデータを使用できるように、ストアをvueルートファイルに登録します。

私のプロジェクトファイル構造

main.jsファイルにストアを登録する

そしてコードが書かれる

ログイン後、フロントエンドはuserIdをキャッシュし、userIdを検索します。

このポジションは公開ページで使用されます

概要: main.js はギルドのボスです。ボスに報酬を与えると、ボスからいくつかの小道具が渡されるので、これを使って小道具を使うことができます。

Vue プロジェクトはいつ store.state、$store.state、this.$store.s を使用しますか?

ストアと[this.]$store

つまり、ストアをルート コンポーネントに挿入すると、すべての .vue ファイルで this.$store.xxxx を直接使用できます。

Vue 公式サイト: Vue コンポーネントで this.$store.property にアクセスするには、作成したストアを Vue インスタンスに提供する必要があります。 Vuex は、ストア オプションとして、ルート コンポーネントからすべての子コンポーネントにストアを「挿入」するメカニズムを提供します。

//メイン.js
'./store' からストアをインポートします
新しいVue({
  el: '#app',
  store, //ルートコンポーネント注入ストア
})

//インデックス.vue
取得データ() {
 戻る {
  ユーザーID: this.$store.state.user.userId、
  ......
 }
}

js ファイルで store を使用する場合は、まず '@/store' から store をインポートし、次に store.xxx を使用する必要があります。これは、this.$store は js では印刷できないためです。

// src/test.js ファイルimport store from './store/';
コンソール.log(ストア)
console.log(this) // 未定義
console.log(this.$store) // エラーを報告します

this.$store と $store

$store は Vue インスタンス (つまり Vue.prototype) にマウントされ、コンポーネントは実際には Vue インスタンスです。コンポーネント内でこれを使用して、プロトタイプのプロパティにアクセスできます。

<template> にはコンポーネントインスタンスのコンテキストがあり、{{$store.state.XXX }} を通じて直接アクセスできます。これはスクリプト内の this.$store.state.XXX に相当します。

$store はデータで返される変数と考えてください。これを以下のスクリプトで使用する場合は追加する必要がありますが、上記のテンプレートでは必要ありません。

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。