Explication détaillée des modules vuex2.0-js tutoriel-php.cn

Explication détaillée des modules vuex2.0

小云云

Libérer： 2018-01-16 13:05:34

original

2308 Les gens l'ont consulté

Cet article présente principalement les modules de vuex2.0. L'éditeur le trouve plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Qu'est-ce qu'un module ?

Contexte : State dans Vue utilise une seule structure arborescente d'état, et tous les états doivent être placés dans state. Si le projet est plus complexe, alors state est un objet volumineux. l'objet deviendra également très volumineux et difficile à gérer.

module : Chaque module peut avoir son propre état, mutation, action, getters, ce qui rend la structure très claire et facile à gérer.

Comment utiliser le module ?

Structure générale

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

Copier après la connexion

Données à l'intérieur du module : ①État interne, l'état à l'intérieur du module est local , qui sont privés du module, comme les données de liste dans l'état du module car.js, nous devons les obtenir via this.$store.state.car.list ② Les getters internes, les mutations et les actions sont toujours enregistrés dans le espace de noms global, ceci permet à plusieurs modules de répondre à la même mutation en même temps ; le résultat de this.$store.state.car.carGetter n'est pas défini, ce qui peut être obtenu via this.$store.state.carGetter.

Passer des paramètres : getters====({state(local state),getters(global getters object),roosState(root state)}); status), commit, roosState (root state)}).

Créez un nouveau projet pour en faire l'expérience, créez un nouveau projet vuemodule via vue –cli, n'oubliez pas d'installer vuex.

1, dans le répertoire src Créez un nouveau dossier de connexion et créez-y index.js pour stocker l'état du module de connexion. Par souci de simplicité, j'ai mis tous les états, actions, mutations et getters sous le module dans le fichier index.js.

Ajoutez-y d'abord simplement un statut, userName : « sam »

const state = {
  useName: "sam"
};
const mutations = {

};
const actions = {

};
const getters = {

};

// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}

Copier après la connexion

2. Créez un nouveau store.js dans le répertoire src. est le magasin racine, qui importe le module de connexion via l'attribut modules.

import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

// 引入login 模块
import login from "./login"

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})

Copier après la connexion

3. Introduisez store dans main.js et injectez-le dans l'instance racine de vue.

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;

// 引入store
import store from "./store"

new Vue({
 el: &#39;#app&#39;,
 store, // 注入到根实例中。
 render: h => h(App)
})

Copier après la connexion

4. Obtenez l'état sous connexion via l'attribut calculé dans app.vue Notez ici qu'en l'absence de modules, le composant transmet ce .$store. .state.Le nom de l'attribut peut être obtenu, mais une fois qu'il y a des modules, l'état est limité à l'espace de noms de connexion (module), donc le nom du module (espace de noms) doit être ajouté devant le nom de l'attribut, et ceci.$store est passé dans le composant.state.Module name.Attribute name, voici le statut obtenu avec succès à partir de this.$store.state.login.userName

<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
 </p>
</template>

<script>
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>

Copier après la connexion

composant. Le répertoire et l'affichage du projet sont les suivants

4. Changer le nom par des actions et des mutations Cela implique une action de répartition, des mutations de validation et des mutations pour changer l'état.<🎜. >

Ajoutez d'abord l'action changeName et les mutations CHANGE_NAME dans le dossier de connexion index.js.

const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};

const actions = {
  changeName ({commit},anotherName) {
    commit("CHANGE_NAME", anotherName)
  }
};

Copier après la connexion

Ajoutez un bouton dans app.vue :