Detaillierte Erklärung der vuex2.0-Module

Dieser Artikel stellt hauptsächlich die Module von vuex2.0 vor. Der Herausgeber findet ihn ziemlich gut. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Was ist ein Modul?

Hintergrund: Der Status in Vue verwendet eine einzelne Statusbaumstruktur, und alle Status sollten im Status platziert werden. Wenn das Projekt komplexer ist, handelt es sich bei dem Status um ein großes Objekt Das Objekt wird außerdem sehr groß und schwer zu verwalten.

Modul: Jedes Modul kann seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seine eigenen Getter haben, wodurch die Struktur sehr klar und einfach zu verwalten ist.

Wie verwende ich das Modul?

Allgemeine Struktur

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

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

Daten innerhalb des Moduls: ①Interner Zustand, der Zustand innerhalb des Moduls ist lokal B. die Listendaten im Modulstatus car.js, müssen wir über this.$store.state.car.list abrufen. ② Interne Getter, Mutationen und Aktionen sind weiterhin im registriert globaler Namespace, damit mehrere Module gleichzeitig auf dieselbe Mutation reagieren können. Das Ergebnis von this.$store.state.car.carGetter ist undefiniert und kann über this.$store.state.carGetter abgerufen werden.

Übergabe von Parametern: getters====({state(local state),getters(global getters object),roosState(root state)}); actions====({state(local status), commit, roosState (root state)}).

Erstellen Sie ein neues Projekt, um es zu erleben, erstellen Sie ein neues Projekt vuemodule über vue –cli, vergessen Sie nicht, vuex zu installieren.

1, im src-Verzeichnis Erstellen Sie einen neuen Anmeldeordner und erstellen Sie darin index.js, um den Status des Anmeldemoduls zu speichern. Der Einfachheit halber habe ich alle Zustände, Aktionen, Mutationen und Getter unter dem Modul in der Datei index.js abgelegt.

Fügen Sie zunächst einfach einen Status hinzu, Benutzername: „sam“

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

};
const actions = {

};
const getters = {

};

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

2. Erstellen Sie eine neue Datei „store.js“ im src-Verzeichnis ist der Stammspeicher, der das Anmeldemodul über das Modulattribut importiert.

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. Store in main.js einführen und in die Vue-Root-Instanz einfügen.

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

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

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

4. Rufen Sie den Status unter login über das berechnete Attribut in app.vue ab. Beachten Sie hier, dass die Komponente diesen .$store übergibt .state.Der Attributname kann abgerufen werden, aber nachdem Module vorhanden sind, ist der Status auf den Login-Namespace (Modul) beschränkt, daher muss der Modulname (Namespace) vor dem Attributnamen und this.$store hinzugefügt werden wird in der Komponente übergeben. .state.Module name.Attribute name, hier ist der Status, der erfolgreich von 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>

erhalten wurde Komponente. Das Projektverzeichnis und die Anzeige lauten wie folgt:

4. Ändern Sie den Namen durch Aktionen und Mutationen. Dies beinhaltet Versandaktionen, Commit-Mutationen und Mutationen, um den Status zu ändern.

Fügen Sie zunächst die Aktion „changeName“ und die Mutationen „CHANGE_NAME“ im Anmeldeordner index.js hinzu.

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

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

Fügen Sie eine Schaltfläche in app.vue hinzu: bb9345e55eb71822850ff156dfde57c8 an json120d611986108da972f06c8ab0c8bab5 löst beim Klicken eine Aktion aus. Wie werden also Aktionen in der Komponente ausgelöst?

In einem Modul ist der Status auf den Namespace des Moduls beschränkt und für den Zugriff ist ein Namespace erforderlich. Aber Aktionen, Mutationen und eigentlich Getter sind nicht eingeschränkt. Sie sind standardmäßig im globalen Namespace registriert. Die sogenannte Registrierung im globalen Namespace bedeutet tatsächlich, dass die Art und Weise, wie wir auf sie zugreifen, die gleiche ist wie ohne Module sind gleich. Wenn es beispielsweise kein Modul gab, this.$store.dispatch("actions"), werden die Aktionen jetzt, da es Module gibt, auch unter das Modul geschrieben (changeName wird in index.js im Anmeldeverzeichnis geschrieben), wir kann immer noch so schreiben, this.$store.dispatch(„changeName“), die Getter in der Komponente werden auch über die Getter in this.$store.getters.module abgerufen.

<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, lokale Parameter

Obwohl Dispatch-Aktionen und Commit-Mutationen global verwendet werden können, sind die im Modul geschriebenen Aktionen, Mutationen und Getter Die von ihnen erhaltenen Standardparameter sind nicht global, sondern lokal und auf das Modul beschränkt, in dem sie sich befinden. Beispielsweise erhalten Mutationen und Getter den Status als ersten Standardparameter. Dieser Statusparameter ist auf das Modul beschränkt, in dem sich die Mutationen und Getter befinden. Die Mutationen und Getter im Anmeldeordner erhalten nur den Status im aktuellen index.js als Parameter. Aktionen erhalten ein Kontextobjekt als Parameter. Das Modul entspricht einem kleinen Speicher.

Wie können wir also den Status und die Getter im Stammspeicher abrufen? Vuex stellt rootState und rootGetters als Standardparameter in Gettern im Modul bereit. Das Kontextobjekt in Aktionen verfügt außerdem über zwei weitere Eigenschaften: context.getters und context.rootState. Diese globalen Standardparameter sind hinter den lokalen Parametern angeordnet.

Wir fügen Status und Getter in store.js hinzu:

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

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

index.js

im Anmeldeverzeichnis

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语法的详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der vuex2.0-Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!