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 Busgenü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. 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. 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 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. 1. Vuex.mapState (map: Array 2. Vuex.mapGetters(map: Array 3. Vuex.mapActions(map: Array 4. Vuex.mapMutations(map: Array Informationen zur spezifischen Verwendung von Vuex-Hilfsfunktionen finden Sie in der API-Dokumentation 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 Erstellen Sie ein Verzeichnis mit dem Namen „store“ unter dem src-Verzeichnis, um Code für die Statusverwaltung zu speichern. Fügen Sie die Store-Instanz zur erstellten Vue-Instanz in der main.js-Datei hinzu 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 list.vue 修改App.vue文件 index.html添加bootstrap.css 以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！
state:{
todoLists:[],
},//Getters函数 接受 state 作为其第一个参数
getters:{
todoCount(state){
return state.todoLists.length;
}
},//和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;
}
},//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
Erstellt eine berechnete Eigenschaft der Komponente, die den Status im Vuex-Speicher zurückgibt.
Erstellen Sie die berechnete Eigenschaft der Komponente und geben Sie den Rückgabewert zurück des Getters.
erstellt eine Komponentenmethode zum Verteilen von Aktionen.
Erstellen Sie eine Komponentenmethode, um die Mutation einzureichen. TodoList-Beispiel
vue init webpack-simple vue-vuex-todolist
npm install
npm install vuex --save
npm run dev //启动项目
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;import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
})<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><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('onDelTodo',index);
}
},
computed:{
...mapState([
'aTodos'
])
}
}
</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><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 './components/input.vue';
import todoList from './components/list.vue';
import {mapGetters} from "vuex";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
...mapGetters({
todoCount:"nCounts"
})
},
components:{
todoInput,
todoList
}
}
</script>
<!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>
相关推荐：
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!
