Detaillierte Erklärung des einfachen Stores von Vue

konstanter Zustand = {
    msg: 'Dies ist mein Status',
}
Standard exportieren {
    Zustand
}

const getter = {
    msg:state => staat.meinstaat.msg,
}
Standardgetter exportieren

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren
Vue.Verwenden(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const moduleFiles = require.context('./modules', true, /\.js$/)
// Es werden automatisch alle Vuex-Module in Ihrer Moduldatei benötigt. // Sie müssen die App nicht aus „./modules/app“ importieren.
// es werden automatisch alle Vuex-Module aus der Moduldatei angefordert
const module = moduleFiles.keys().reduce((modules, modulePath) => {
  // setze './app.js' => 'App'
  const Modulname = Modulpfad.replace(/^\.\/(.*)\.\w+$/, '$1')
  Konstantwert = ModuleDateien(Modulpfad)
  Module[Modulname] = Wert.Standard
  Rückführmodule
}, {})
const store = neuer Vuex.Store({
  Module,
  Getter,
})
Standardspeicher exportieren

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren
Vue.Verwenden(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const moduleFiles = require.context('./modules', true, /\.js$/)
// Es werden automatisch alle Vuex-Module in Ihrer Moduldatei benötigt. // Sie müssen die App nicht aus „./modules/app“ importieren.
// es werden automatisch alle Vuex-Module aus der Moduldatei angefordert
const module = moduleFiles.keys().reduce((modules, modulePath) => {
  // setze './app.js' => 'App'
  const Modulname = Modulpfad.replace(/^\.\/(.*)\.\w+$/, '$1')
  Konstantwert = ModuleDateien(Modulpfad)
  Module[Modulname] = Wert.Standard
  Rückführmodule
}, {})
const store = neuer Vuex.Store({
  Module,
  Getter,
})
Standardspeicher exportieren

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren
Vue.Verwenden(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const moduleFiles = require.context('./modules', true, /\.js$/)
// Es werden automatisch alle Vuex-Module in Ihrer Moduldatei benötigt. // Sie müssen die App nicht aus „./modules/app“ importieren.
// es werden automatisch alle Vuex-Module aus der Moduldatei angefordert
const module = moduleFiles.keys().reduce((modules, modulePath) => {
  // setze './app.js' => 'App'
  const Modulname = Modulpfad.replace(/^\.\/(.*)\.\w+$/, '$1')
  Konstantwert = ModuleDateien(Modulpfad)
  Module[Modulname] = Wert.Standard
  Rückführmodule
}, {})
const store = neuer Vuex.Store({
  Module,
  Getter,
})
Standardspeicher exportieren

<Vorlage>
  <div id="app">
   <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>
<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

<Vorlage>
  <div Klasse="hallo">
    <img src="../assets/logo.png" />
    <br />
    <Eingabe v-Modell="msg"/>
    <h2>{{ msg }}</h2>
    <router-link to="/two">Ich möchte zur zweiten Seite</router-link>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Hallo Welt",
  Daten() {
    zurückkehren {
      msg: "Willkommen beim neuen Vue-Projekt",
    };
  },
  Methoden: {
    setstate(Wert) {
      sessionStorage.setItem('msg', Wert);
    },
  },
  betrachten:
    msg(neuerName, alterName) {
      dies.setstate(neuerName);
    },
  },
};
</Skript>
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
A {
  Farbe: #42b983;
}
</Stil>

<Vorlage>
  <div>
    Dies ist die zweite Seite<h2>{{ msg }}</h2>
    <router-link to="/">Ich möchte zurück</router-link>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Nachricht: "",
    };
  },
  Methoden: {
    setmsg() {
        dies.msg = sessionStorage.getItem('msg');
    },
  },
  erstellt(){
      dies.setmsg()
  }
};
</Skript>