Explication détaillée de la gestion de l'état des plug-ins implémentée dans vuejs

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;
      }
  },

4,

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);
      }

  }

Fonction d'assistance Vuex

1. (map : Array98c455a79ddfebb79781bff588e7b37e | Object) : ObjectCrée une propriété calculée du composant qui renvoie l'état dans le magasin Vuex.

2. Vuex.mapGetters(map: Array98c455a79ddfebb79781bff588e7b37e | Object) : ObjectCréez la propriété calculée du composant et renvoyez la valeur de retour. du getter.

3. Vuex.mapActions(map: Array98c455a79ddfebb79781bff588e7b37e | Object) : ObjectCréez une méthode de composant pour distribuer l'action.

4. Vuex.mapMutations(map: Array98c455a79ddfebb79781bff588e7b37e | Object) : ObjectCréer une méthode de composant pour soumettre une mutation.

Pour une utilisation spécifique des fonctions auxiliaires de Vuex, veuillez vous référer à : Documentation de l'API

Exemple TodoList

Après avoir compris les concepts de base de Vuex, nous créerons une liste de tâches pour nous familiariser avec l'ensemble du processus d'utilisation.

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   //启动项目

Créez un répertoire nommé store sous le répertoire src pour stocker le code lié à la gestion de l'état. Créez d'abord index.js

Ajoutez l'instance Store à l'instance Vue construite dans le fichier main.js

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;

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>

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子组件调用父组件的方法

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!