So verwenden Sie Dateien in Vue

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. In diesem Artikel wird hauptsächlich das Web-Front-End Vue vorgestellt: Wie man Vuex als einzelne Datei verwendet, können Freunde in Not lesen:

Was ist Vuex?

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert. Vuex ist auch in die offizielle Erweiterung des Debugging-Tools devtools von Vue integriert und bietet erweiterte Debugging-Funktionen wie konfigurationsfreies Zeitreise-Debugging, Import und Export von Status-Snapshots usw.

Das letzte Mal habe ich ein Additions- und Subtraktionsbeispiel verwendet, um die grundlegende Verwendung von Vuex zu erklären und unter welchen Umständen es verwendet wird. Das letzte Mal habe ich dieses Beispiel kurz in einer Komponente demonstriert. Dieses Mal habe ich vuex in eine separate Datei extrahiert, um den Status des gesamten Projekts einheitlich zu verwalten.

Wie ich letztes Mal sagte: Wenn Ihr Projekt groß genug ist, ist es am besten, vuex zu verwenden, um den Status des gesamten Projekts zu verwalten. Wenn es sich um ein kleines Projekt handelt, wird die Verwendung nicht jedem empfohlen Es. Okay, hören wir auf, Unsinn zu reden:

Nachdem Sie das gesamte Projekt vorbereitet haben, sind Vue-Cli, Webpack, Vuex, Router usw. installiert

Der erste Schritt besteht darin, ein neues zu erstellen Der Inhalt der Datei mit dem Namen: store.js lautet wie folgt:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
 state: { // 相当于vue里data 存放整个项目的各个状态
  number: 0 
 }，
 mutations: { //相当于vue里的methods放方法的，定义一些可以用来调用和修改state里的状态值
   addFun (state,num) { 
    state.number = num
   }
 }
})

Diese Statusverwaltungsdatei wurde erstellt. Der nächste Schritt besteht darin, wie

<template>
 {{numbertxt}}
 <button @click="addfun(1)">按钮1</button>
 <button @click="addfun(2)">按钮2</button>
</template> 
<script>
import store from &#39;store.js&#39; // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit(&#39;addFun&#39;,num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
｝
</script>

aufgerufen wird. Das Ganze ist ein wenig komplizierter und die Vuex-unabhängige Extraktion. Das war's mit Lis Beispielen. Wenn Sie Freunde haben, die Vue nicht verstehen oder mögen, können Sie mich auf WeChat (nihaomeili87) hinzufügen und gemeinsam Fortschritte machen!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementierung der Datumsauswahlkomponente im Vue-Mobilterminal

So verpacken Sie bestimmte JS-Dateien separat im Webpack

So implementieren Sie einen kreisförmigen Fortschrittsbalken im WeChat-Miniprogramm

Implementieren Sie dynamisch importierte Dateien im Webpack

Verwandte Tricks in JavaScript

Drei grundlegende Modi von Vue-Routing-Parametern (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!