什么是module？

成都創(chuàng)新互聯(lián)主營(yíng)吉州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā),吉州h5小程序定制開發(fā)搭建,吉州網(wǎng)站營(yíng)銷推廣歡迎吉州等地區(qū)企業(yè)咨詢

背景：在Vue中State使用是單一狀態(tài)樹結(jié)構(gòu)，應(yīng)該的所有的狀態(tài)都放在state里面，如果項(xiàng)目比較復(fù)雜，那state是一個(gè)很大的對(duì)象，store對(duì)象也將對(duì)變得非常大，難于管理。

module：可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。

怎么用module？

一般結(jié)構(gòu)

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

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

模塊內(nèi)部的數(shù)據(jù)：①內(nèi)部state，模塊內(nèi)部的state是局部的，也就是模塊私有的，比如是car.js模塊state中的list數(shù)據(jù)，我們要通過this.$store.state.car.list獲??；②內(nèi)部getter、mutation和action，仍然注冊(cè)在全局命名空間內(nèi)，這是為了多模塊可以同時(shí)響應(yīng)同一mutation；this.$store.state.car.carGetter的結(jié)結(jié)果是undefined，而通過this.$store.state.carGetter則可以拿到。

傳參：getters====({state(局部狀態(tài)),getters（全局getters對(duì)象）,roosState（根狀態(tài)）})；actions====({state(局部狀態(tài)),commit,roosState（根狀態(tài)）}).

新建一個(gè)項(xiàng)目體驗(yàn)一下，通過vue –cli新建一個(gè)項(xiàng)目vuemodule, 不要忘記安裝vuex.

1, 在src 目錄下新一個(gè)login文件夾，在里面新建index.js 用于存放login 模塊的狀態(tài)。 為了簡(jiǎn)單起見，我把模塊下的state, actions,mutations, getters 全放在index.js文件中。

先簡(jiǎn)單給它增加一個(gè)狀態(tài)，userName: “sam”

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

};
const actions = {

};
const getters = {

};

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

2，在src 目錄下，再新建一個(gè) store.js 這是根store, 它通過modules 屬性引入 login模塊。

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, 在main.js中引入store, 并注入到vue 根實(shí)例中。

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

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

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

4，在 app.vue 中通過computed屬性獲取到login下的state.  這里要注意，在沒有modules 的情況下，組件中通過  this.$store.state.屬性名  可以獲取到，但是有modules 之后，state 被限制到login 的命名空間（模塊）下，所以屬性名前面必須加模塊名（命名空間），組件中通過 this.$store.state.模塊名.屬性名，在這里是 this.$store.state.login.userName

組件中成功獲取到狀態(tài)。項(xiàng)目目錄和展示如下

4 ，通過actions, mutations 改變名字， 這就涉及到dispatch action, commit mutations, mutations 改變state.

先在login 文件夾 index.js中添加changeName action 和  CHANGE_NAME  mutations.

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

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

在app.vue 中添加一個(gè)按鈕： change to json， 點(diǎn)擊時(shí)，dispatch  一個(gè) action. 那在組件中怎么dispatch actions 呢？

在模塊中，state 是被限制到模塊的命名空間下，需要命名空間才能訪問。 但actions 和mutations, 其實(shí)還有 getters 卻沒有被限制，在默認(rèn)情況下，它們是注冊(cè)到全局命名空間下的，所謂的注冊(cè)到全局命名空間下，其實(shí)就是我們?cè)L問它們的方式和原來沒有module 的時(shí)候是一樣的。比如沒有module 的時(shí)候，this.$store.dispatch(“actions”), 現(xiàn)在有了modules, actions 也寫在了module 下面（changeName 寫到了login目錄下的index.js中），我們?nèi)匀豢梢赃@么寫，this.$store.dispatch(“changeName”)， 組件中的getters, 也是通過 this.$store.getters.module中g(shù)etters 來獲取。

6, 其實(shí)actions, mutations, getters, 也可以限定在當(dāng)前模塊的命名空間中。只要給我們的模塊加一個(gè)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
}

當(dāng)所有的actions, mutations, getters 都被限定到模塊的命名空間下，我們dispatch actions, commit mutations 都需要用到命名空間。如 dispacth("changeName"),  就要變成 dispatch("login/changeName"); getters.localJobTitle 就要變成 getters["login/localJobTitle"]

app.vue 如下：

有了命名空間之后，mapState, mapGetters, mapActions 函數(shù)也都有了一個(gè)參數(shù)，用于限定命名空間，每二個(gè)參數(shù)對(duì)象或數(shù)組中的屬性，都映射到了當(dāng)前命名空間中。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。