Cet article parle de l'implémentation de la gestion de l'état des plug-ins dans vuejs ou si vous ne connaissez pas l'implémentation de la gestion de l'état des plug-ins dans vuejs ou si vous êtes intéressé par l'implémentation de la gestion de l'état des plug-ins dans vuejs, alors jetons un oeil à cet article. Bon, assez de bêtises. Entrons dans le vif du sujet
Pour les novices, lorsqu'ils sont entrés en contact avec vuex, ils n'ont entendu que ça. il est très puissant, facile à utiliser et comporte diverses opérations. Une fois que vous essayez de le comprendre, le moment venu, il semble impuissant. C’est la même chose pour moi lorsque je l’ai découvert pour la première fois, j’ai lu des documents et des vidéos, mais je l’ai finalement mis de côté. Quand j'y suis revenu pour y réfléchir après un certain temps, j'ai acquis de nouvelles connaissances et une nouvelle compréhension.
Tout d'abord, si vous voulez vraiment maîtriser Vuex, alors vous devez répondre à ces questions :
1. Qu'est-ce que vuex ?
2. . Dans quelles circonstances vuex doit-il être utilisé (c'est-à-dire quel type de problèmes vuex peut-il résoudre) et dans quelles circonstances est-il approprié d'utiliser vuex ?
. Alors jetons d'abord un œil à ces deux questions :
Qu'est-ce que vuex ? Le site officiel dit : Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. D'après ma compréhension populaire : vuex est utilisé pour gérer certains états entre différents composants. On peut comprendre que ces états sont les parties publiques (partagées). À ce stade, n'importe quel composant peut en obtenir un statut ou déclencher des événements comportementaux.
Quand est utilisé vuex Le site officiel dit : Si vous ne prévoyez pas de développer une grande application d'une seule page ? , utiliser Vuex peut être encombrant et redondant. C'est vrai : si votre application est assez simple, il vaut probablement mieux ne pas utiliser Vuex. Un simple bus événementiel mondial vous suffit. Cependant, si vous avez besoin de créer une application d'une seule page de taille moyenne à grande, vous réfléchirez probablement à la manière de mieux gérer l'état en dehors du composant, Vuex. deviendra un choix naturel.
D'accord, je suppose maintenant que vous développez un projet relativement important, dans lequel vuex sera utilisé. Tissu en laine ? À mesure que la complexité de l'application augmente, de plus en plus de données ou d'états de composants seront transférés entre les composants. Par exemple : lorsque le composant A entre dans le composant B (la page A entre dans la page B), il est souvent nécessaire d'en apporter. les paramètres sont transmis, vous pouvez choisir de les placer après l'URL et de les transmettre en tant que paramètres. Si vous ne souhaitez pas exposer les paramètres facilement, vous pouvez d'abord les enregistrer dans la session ou dans le stockage local, puis les supprimer lorsque. vous entrez dans la deuxième page. Oui, c’est bien une solution, et elle est beaucoup utilisée. Mais ce n'est pas une bonne méthode pour le moment, vous avez besoin de vuex pour vous aider. De plus, lorsque vous aurez une compréhension de base de vuex, vous constaterez que la gestion de vuex est basée sur une pensée modulaire, ce qui est très convivial pour la gestion et la maintenance ultérieures du projet.
vous devez donc maintenant avoir une compréhension plus profonde des concepts fondamentaux de vuex. Ce qui suit est un concept que je comprends personnellement. Tout d'abord, il est recommandé de lire d'abord le document officiel Vuex2.0 concept.
Vuex La définition modèle de Store in est la suivante :
1, state définit la structure des données de l'application, où les données d'initialisation (état) sont placées dans vuex. C'est l'équivalent des données du composant utilisé pour stocker les données.
state:{
todoLists:[],
},2. Dérivez l'état de l'état, par exemple en obtenant le nombre total de listes de tâches dans l'état. En fait, c'est équivalent à la propriété calculée dans vue, sauf que les getters sont placés dans vuex.
//Getters函数 接受 state 作为其第一个参数
getters:{
todoCount(state){
return state.todoLists.length;
}
},3. mutations est le seul endroit où le statut de la candidature peut être mis à jour. Semblable à l'événement $on dans vue : each Chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire). Remarque : les mutations doivent être des fonctions synchrones
//和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;
}
},actions Définir la description des informations de changement du déclencheur de validation. Toute opération asynchrone peut être effectuée dans des actions . Un exemple courant est d'obtenir des données du serveur une fois l'acquisition des données terminée, store.commit() sera appelé. (similaire à $ dans vue submit) pour invoquer des modifications Statut dans le magasin. Vous pouvez utiliser la répartition dans les composants pour émettre des actions.
//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);
}
}1. (map : Array
2. Vuex.mapGetters(map: Array
3. Vuex.mapActions(map: Array
4. Vuex.mapMutations(map: Array
Exemple TodoList
Utilisez l'outil vue-cli
pour créer le répertoire du projet et installer vuex
vue init webpack-simple vue-vuex-todolist npm install npm install vuex --save npm run dev //启动项目
<🎜. >
Ajoutez l'instance Store à l'instance Vue construite dans le fichier main.jsimport 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;src répertoire Créez un répertoire nommé composants pour stocker les composants vue et créez les fichiers input.vue, list.vue
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
})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><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>修改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 './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>
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>以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！
相关推荐：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
