Detaillierte Erläuterung der in vuejs implementierten Plug-in-Statusverwaltung

In diesem Artikel geht es um die Implementierung der Plug-in-Statusverwaltung in Vuejs. Wenn Sie nichts über die Implementierung der Plug-in-Statusverwaltung in Vuejs wissen oder an der Implementierung der Plug-in-Statusverwaltung in Vuejs interessiert sind, wenden Sie sich bitte an uns. Dann werfen wir einen Blick auf diesen Artikel. Okay, genug Unsinn. Kommen wir zum Punkt. Als Anfänger haben sie nur das gehört Es ist sehr leistungsstark, einfach zu bedienen und verfügt über verschiedene NB-Operationen. Sobald Sie versuchen, es zu verstehen, scheint es machtlos zu sein. Das Gleiche gilt für mich, als ich zum ersten Mal damit in Kontakt kam, habe ich Dokumente und Videos gelesen, es aber schließlich beiseite gelegt. Als ich nach einer Weile wieder darüber nachdachte, gewann ich neues Wissen und Verständnis.

Wenn Sie Vuex wirklich beherrschen wollen, müssen Sie zunächst die folgenden Fragen klären:

1. Was ist vuex?

2 . Unter welchen Umständen sollte vuex verwendet werden (d. h. welche Probleme kann vuex lösen) und unter welchen Umständen ist die Verwendung von vuex geeignet? Schauen wir uns also zunächst diese beiden Fragen an:

Was ist vuex? Vuex ist ein

Zustandsverwaltungsmuster

, das speziell für Vue.js-Anwendungen entwickelt wurde. Nach meinem allgemeinen Verständnis: Vuex wird verwendet, um einige Zustände zwischen verschiedenen Komponenten zu verwalten. Es kann verstanden werden, dass diese Zustände die öffentlichen (gemeinsamen) Teile sind. Zu diesem Zeitpunkt kann jede Komponente einen Status davon erhalten oder einige Verhaltensereignisse auslösen. Wann wird Vuex verwendet? Auf der offiziellen Website heißt es: Wenn Sie nicht vorhaben, eine große einseitige Anwendung zu entwickeln , verwenden Vuex kann umständlich und überflüssig sein. Es stimmt – wenn Ihre App einfach genug ist, sollten Sie Vuex besser nicht verwenden. Ein einfacher

Global Event Bus

genügt Ihnen. Wenn Sie jedoch eine mittelgroße bis große Einzelseitenanwendung erstellen müssen, werden Sie höchstwahrscheinlich darüber nachdenken, wie Sie den Zustand außerhalb der Komponente Vuex besser verwalten können wird eine natürliche Wahl sein. Okay, jetzt gehe ich davon aus, dass Sie ein relativ großes Projekt entwickeln, bei dem Vuex verwendet wird Wollstoff? Mit zunehmender Komplexität der Anwendung werden immer mehr Daten oder Komponentenzustände zwischen Komponenten übertragen. Wenn beispielsweise Komponente A in Komponente B eintritt (Seite A eintritt in Seite B), ist es häufig erforderlich, einige mitzubringen Wenn Parameter übergeben werden, können Sie sie nach der URL einfügen und als Parameter übergeben. Wenn Sie die Parameter nicht einfach offenlegen möchten, können Sie sie zunächst in der Sitzung oder im lokalen Speicher speichern und sie dann wieder herausnehmen Sie betreten die zweite Seite. Ja, das ist tatsächlich eine Lösung, und sie wird häufig verwendet. Dies ist jedoch keine gute Methode. Sie benötigen die Hilfe von Vuex. Wenn Sie über ein grundlegendes Verständnis von Vuex verfügen, werden Sie außerdem feststellen, dass die Vuex-Verwaltung auf modularem Denken basiert, was sich sehr positiv auf die spätere Verwaltung und Wartung des Projekts auswirkt.

Jetzt müssen Sie also ein tieferes Verständnis für die Kernkonzepte von Vuex haben. Das Folgende ist ein Konzept, das ich persönlich verstehe. Zunächst wird empfohlen, dass Sie zuerst das offizielle Dokument Vuex2.0-Konzept lesen.

Vuex Die Vorlagendefinition von „Speichern in“ lautet wie folgt:

1, state definiert die Datenstruktur der Anwendung, in der Initialisierungsdaten (Status) in Vuex platziert werden. Es entspricht den Daten in der Komponente, die zum Speichern von Daten verwendet wird.

 state:{
        todoLists:[],
    },

2. Getter ist von Leiten Sie den Status vom Status ab, indem Sie beispielsweise die Gesamtzahl der todoLists im Status ermitteln. Tatsächlich entspricht es der berechneten Eigenschaft in Vue, mit der Ausnahme, dass die Getter in Vuex platziert werden.

//Getters函数 接受 state 作为其第一个参数
  getters:{
      todoCount(state){
          return state.todoLists.length;
      }
  },

3. Mutationen ist der einzige Ort, an dem der Antragsstatus aktualisiert werden darf. Ähnlich dem $on-Ereignis in vue:each Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). Hinweis: Mutationen müssen synchrone Funktionen

//和Getters函数一样 接受 state 作为其第一个参数
  mutations:{
      //新増 TodoList item
      ONADDTODO(state,item){
          state.aTodos.push(item);
      },
      //删除 TodoList item
      ONDELTODO(state,index){
          state.aTodos.splice(index,1);
      },
      //设置 错误提示信息
      ONERROR(state,str){
          state.massage=str;
      }
  },

4, Aktionen sein Die Beschreibung der durch die Übermittlung ausgelösten Änderungsinformationen. Jeder asynchrone Vorgang kann in Aktionen ausgeführt werden. Ein häufiges Beispiel ist das Abrufen von Daten vom Server aufgerufen werden (ähnlich wie $ in vue emit), um Änderungen aufzurufen Status im Store. Sie können Dispatch-in-Komponenten verwenden, um Aktionen auszuführen.

//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
    因此你可以调用 context.commit 提交一个 mutation，
    或者通过 context.state 和 context.getters 来获取 state 和 getters
  actions:{
      //提交 ONADDTODO
      onAddTodo(context,item){
          if(item.value!=""){
              context.commit("ONADDTODO",item);
              context.commit("ONERROR","");
          }else{
              context.commit("ONERROR","添加失败")
          }
      },
      //提交 ONDELTODO
      //可利用 ES2015 的 [参数解构] 来简化代码
      onDelTodo({commit},index){
          //commit=context.commit
          commit("ONDELTODO",index);
      }

  }

Vuex-Hilfsfunktion

1. Vuex.mapState (map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object
Erstellt eine berechnete Eigenschaft der Komponente, die den Status im Vuex-Speicher zurückgibt.

2. Vuex.mapGetters(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object
Erstellen Sie die berechnete Eigenschaft der Komponente und geben Sie den Rückgabewert zurück des Getters.

3. Vuex.mapActions(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object
erstellt eine Komponentenmethode zum Verteilen von Aktionen.

4. Vuex.mapMutations(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Objekt
Erstellen Sie eine Komponentenmethode, um die Mutation einzureichen.

Informationen zur spezifischen Verwendung von Vuex-Hilfsfunktionen finden Sie in der API-Dokumentation

TodoList-Beispiel

Nachdem wir die Grundkonzepte von Vuex verstanden haben, erstellen wir eine Todolist, um uns mit dem gesamten Nutzungsprozess vertraut zu machen.

Verwenden Sie das Vue-Cli-Tool , um das Projektverzeichnis zu erstellen und vuex zu installieren

vue init webpack-simple vue-vuex-todolist
npm install 
npm install vuex --save
npm run dev   //启动项目

Erstellen Sie ein Verzeichnis mit dem Namen „store“ unter dem src-Verzeichnis, um Code für die Statusverwaltung zu speichern.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        massage:"",
        aTodos:[{value:"默认默认",id:0}],
    },
    getters:{
        nCounts(state){
            return state.aTodos.length;
        }
    },
    mutations:{
        //新増 TodoList item
        ONADDTODO(state,item){
            state.aTodos.push(item);
        },
        //删除 TodoList item
        ONDELTODO(state,index){
            state.aTodos.splice(index,1);
        },
        //设置 错误提示信息
        ONERROR(state,str){
            state.massage=str;
        }
    },
    actions:{
        //提交 ONADDTODO
        onAddTodo(context,item){
            if(item.value!=""){
                context.commit("ONADDTODO",item);
                context.commit("ONERROR","");
            }else{
                context.commit("ONERROR","添加失败")
            }
        },
        //提交 ONDELTODO
        onDelTodo({commit},index){
            commit("ONDELTODO",index);
        }

    },
    modules:{}
});

export default store;

Fügen Sie die Store-Instanz zur erstellten Vue-Instanz in der main.js-Datei hinzu

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

src Verzeichnis Erstellen Sie ein Verzeichnis mit dem Namen „components“, um Vue-Komponenten zu speichern, und erstellen Sie die Dateien „input.vue“ und „list.vue“

input.vue

<template>
    <p class="form-group ">
      <input type="text" class="form-control"  placeholder="" v-model="value"  />
      <button type="buttom" class="btn btn-default" @click="addItem">Add Item</button>
    </p>
</template>
<script>
    export default{
        data(){
            return {
                value:"",
                id:0
            }
        },
        methods:{
            addItem(){
                let item={value:this.value,id:++this.id};
                this.value="";
                this.$store.dispatch("onAddTodo",item);
            }
        }

    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .form-group{@extend %box;
        .form-control{-webkit-box-flex:1;}
    }
</style>

list.vue

<template>
    <p class="todolist">
      <ul class="list-group">
        <li class="list-group-item" v-for="(item,index) in aTodos" >
            <span>{{item.value}}</span>
            <button class="btn btn-default" @click="delItem(index)">删除</button>
        </li>
       </ul>
    </p>
</template>
<script>
    import {mapState} from "vuex";
    export default{
        data(){
            return {}
        },
        methods:{
            delItem(index){
                this.$store.dispatch(&#39;onDelTodo&#39;,index);
            }
        },
        computed:{
            ...mapState([
                &#39;aTodos&#39;
            ])
        }
    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .list-group-item{display: -webkit-box;-webkit-box-align:center;
        span{
            display: block;
            -webkit-box-flex:1;
        }
    }
</style>

修改App.vue文件

<template>
  <p id="app">
    <h1>Vue.js Vue TodoList</h1>
    <hr>
    <todoInput />
    <todoList />
    <p>todoList 数量：{{todoCount}}</p>
    <pre class="brush:php;toolbar:false">{{$store.state}}

<script> import todoInput from &#39;./components/input.vue&#39;; import todoList from &#39;./components/list.vue&#39;; import {mapGetters} from "vuex"; export default { name: &#39;app&#39;, data () { return { msg: &#39;Welcome to Your Vue.js App&#39; } }, computed:{ ...mapGetters({ todoCount:"nCounts" }) }, components:{ todoInput, todoList } } </script>

index.html添加bootstrap.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-vuex-demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <p id="app"></p>
    <script src="/dist/build.js"></script>
  </body>
</html>

以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！

相关推荐：

Vuejs搜索匹配功能实例详解

Vuejs2.0子组件调用父组件的方法

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der in vuejs implementierten Plug-in-Statusverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!