Eine kurze Diskussion zu this.$store.state.xx.xx in Vue

Sehen Sie sich dies an.$store.state.xx.xx

this.$store.state.xx.xx ist eigentlich das von Vue verwendete Statusverwaltungstool Vuex

Offizielle Vuex-Website: https://vuex.vuejs.org/zh/

Es fühlt sich an, als würde der gemeinsame Status der Komponenten extrahiert und in einem globalen Singleton-Modus verwaltet. In diesem Modus bildet unser Komponentenbaum eine riesige „Ansicht“, und jede Komponente kann einen Status abrufen oder Verhalten auslösen, unabhängig davon, wo sie sich im Baum befindet! (Sie können jederzeit und überall im Projekt darauf zugreifen und es dynamisch ändern. Nach der Änderung aktualisiert Vue Ihr gesamtes Projekt.)

Daten aus dem Store abrufen

Registrieren Sie den Store in der Vue-Stammdatei, damit alle Komponenten die Daten im Store verwenden können

Meine Projektdateistruktur

Registrieren Sie den Store in der Datei main.js

Dann wird der Code geschrieben

Nach der Anmeldung speichert das Frontend die Benutzer-ID im Cache und durchsucht sie anschließend.

Diese Position wird auf der öffentlichen Seite verwendet

Zusammenfassung: main.js ist der Gildenboss. Sie geben dem Boss die Belohnung und der Boss gibt Ihnen einige Requisiten, die Sie verwenden können, damit Sie sie verwenden können.

Wann verwenden Vue-Projekte store.state, $store.state und this.$store.s

speichern und [dieses.]$store

Kurz gesagt, wenn Sie den Store in die Stammkomponente einfügen, können Sie this.$store.xxxx direkt in allen .vue-Dateien verwenden.

Offizielle Vue-Website: Um in einer Vue-Komponente auf this.$store.property zuzugreifen, müssen Sie der Vue-Instanz den erstellten Store bereitstellen. Vuex bietet einen Mechanismus zum „Einfügen“ des Stores aus der Stammkomponente in alle untergeordneten Komponenten als Store-Option.

//main.js
Store aus „./store“ importieren
neuer Vue({
  el: '#app',
  speichern, //Root-Komponenten-Injektionsspeicher
})

//index.vue
getData() {
 zurückkehren {
  Benutzer-ID: this.$store.state.user.userId,
  ......
 }
}

Wenn Sie Store in einer JS-Datei verwenden möchten, müssen Sie zuerst Store aus „@/store“ importieren und dann Store.xxx verwenden, da this.$store nicht in JS gedruckt werden kann.

// src/test.js Dateiimportspeicher aus „./store/“;
console.log(speichern)
console.log(dies) // undefiniert
console.log(this.$store) // meldet einen Fehler 

this.$store und $store

$store wird auf der Vue-Instanz (d. h. Vue.prototype) gemountet, und die Komponente ist tatsächlich eine Vue-Instanz. Sie können dies in der Komponente verwenden, um auf die Eigenschaften des Prototyps zuzugreifen.

<template> hat den Kontext der Komponenteninstanz, auf den direkt über {{$store.state.XXX }} zugegriffen werden kann, was im Skript this.$store.state.XXX entspricht

Betrachten Sie $store einfach als eine Variable, die in Daten zurückgegeben wird. Sie müssen dies hinzufügen, wenn Sie es im folgenden Skript verwenden, aber nicht in der obigen Vorlage.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.