Explication détaillée des modules vuex2.0

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

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
}

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

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

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

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

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

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>

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

Ajoutez un bouton dans app.vue : vers json< /button>, lorsque vous cliquez dessus, distribue une action. Alors, comment distribuer des actions dans le composant ?

Dans un module, l'état est limité à l'espace de noms du module et nécessite un espace de noms pour y accéder. Mais les actions, les mutations et les getters ne sont pas limités. Par défaut, ils sont enregistrés dans l'espace de noms global. Ce que l'on appelle l'enregistrement dans l'espace de noms global signifie en fait que la façon dont nous y accédons est la même que celle du module d'origine sans module. Les temps sont les mêmes. Par exemple, lorsqu'il n'y avait pas de module, this.$store.dispatch("actions"), maintenant qu'il y a des modules, les actions sont également écrites sous le module (changeName est écrit dans index.js dans le répertoire de connexion), nous peut toujours écrire comme ceci, this.$store.dispatch("changeName"), les getters du composant sont également obtenus via les getters de this.$store.getters.module.

<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

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

　　// 和没有modules的时候一样，同样的方式dispatch action
  changeName() {
   this.$store.dispatch("changeName", "Jason")
  }
 }
}

5, paramètres locaux

Bien que les actions de répartition et les mutations de validation puissent être utilisées globalement, les actions, mutations et getters écrits dans le module, Les paramètres par défaut qu'ils obtiennent ne sont pas globaux, mais sont locaux et limités au module dans lequel ils se trouvent. Par exemple, les mutations et les getters obtiendront l'état comme premier paramètre par défaut. Ce paramètre d'état est l'objet d'état limité au module où se trouvent les mutations et les getters. Les mutations et les getters dans le dossier de connexion obtiendront uniquement l'état actuel. index.js comme paramètre. Les actions obtiendront un objet contextuel en paramètre. Cet objet contextuel est l'instance du module actuel. Le module est équivalent à un petit magasin.

Alors, comment pouvons-nous obtenir l'état et les getters dans le magasin racine ? Vuex fournit rootState et rootGetters comme paramètres par défaut dans les getters du module. L'objet contextuel dans les actions aura également deux propriétés supplémentaires, context.getters et context.rootState. Ces paramètres globaux par défaut sont classés derrière les paramètres locaux.

Nous ajoutons l'état, les getters dans store.js :

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

  // 新增state, getters
  state: {
    job: "web"
  },
  getters: {
    jobTitle (state){
      return state.job + "developer"
    }
  }
})

index.js

dans le répertoire de connexion

const actions = {
  // actions 中的context参数对象多了 rootState 参数
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("CHANGE_NAME", anotherName)
    }
  }
};

const getters = {
  // getters 获取到 rootState, rootGetters 作为参数。
  // rootState和 rootGetter参数顺序不要写反，一定是state在前，getter在后面，这是vuex的默认参数传递顺序， 可以打印出来看一下。
  localJobTitle (state,getters,rootState,rootGetters) { 
    console.log(rootState);
    console.log(rootGetters);
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};

app.vue 增加h2 展示 loacaJobTitle, 这个同时证明了getters 也是被注册到全局中的。

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

  <!-- 增加h2 展示 localJobTitle -->
  <h2>{{localJobTitle}}</h2>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  ...mapState({
   useName: state => state.login.useName
  }),

  // mapGeter 直接获得全局注册的getters
  ...mapGetters(["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("changeName", "Jason")
  }
 }
}
</script>

6, 其实actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性：

const state = {
  useName: "sam"
};
const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};
const actions = {
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("CHANGE_NAME", anotherName)
    }
  },
  alertName({state}) {
    alert(state.useName)
  }
};
const getters = {
  localJobTitle (state,getters,rootState,rootGetters) { 
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};
// namespaced 属性，限定命名空间
export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}

当所有的actions, mutations, getters 都被限定到模块的命名空间下，我们dispatch actions, commit mutations 都需要用到命名空间。如 dispacth("changeName"), 就要变成 dispatch("login/changeName"); getters.localJobTitle 就要变成 getters["login/localJobTitle"]

app.vue 如下：

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

  <!-- 增加h2 展示 localJobTitle -->
  <h2>{{localJobTitle}}</h2>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  ...mapState("login",{
   useName: state => state.useName
  }),

   localJobTitle() {
    return this.$store.getters["login/localJobTitle"]
   }
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  alertName() {
   this.$store.dispatch("login/alertName")
  }
 }
}
</script>

有了命名空间之后，mapState, mapGetters, mapActions 函数也都有了一个参数，用于限定命名空间，每二个参数对象或数组中的属性，都映射到了当前命名空间中。

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 computed: {
  // 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。
  ...mapState("login",{
   useName: state => state.useName
  }),
  ...mapGetters("login", ["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  ...mapActions(&#39;login&#39;, [&#39;alertName&#39;])
 }
}
</script>

相关推荐：

Yii2 如何在modules中添加验证码的方法详解

yaf框架中modules下的目录，配置二级域名

JavaScript ES6中关于module语法的详解

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!