這篇文章主要介紹了Vuex modules模式下mapState/mapMutations的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)：公司2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為近1000家公司企業(yè)提供了專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 按需定制制作由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

當(dāng)我們使用 Vuex 實(shí)現(xiàn)全局狀態(tài)維護(hù)時(shí)，可能需要將狀態(tài)值劃分多個模塊，比如一些 root 級的用戶登錄狀態(tài)，token，用戶級的用戶信息，購物車級的購物車信息。

下面我們實(shí)例演示下如何在多模塊下使用 mapState/mapMutations。

• modules 只作用于屬性，屬性會歸屬在相應(yīng)的模塊名的命名空間下。

• mutations, actions, getter 沒有命名空間的限定，所以要保證全局的唯一性，否則后者會覆蓋前者

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './user'
import order from './order'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
    order
  },
  state: {
    hasLogin: false,
    token: ""
  },
  mutations: {
    setHasLogin(state, hasLogin) {
      state.hasLogin = hasLogin
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

export default store

store/user.js

const state = {
  name: "sqrtcat",
  age: 25
}
const mutations = {
  setUserName(state, name) {
    state.name = name
  },
  setUserAge(state, age) {
    state.age = age
  }
}
const actions = {

}
const getters = {

}

export default {
  state,
  mutations,
  actions,
  getters
}

store/order.js

const state = {
  name: "cart",
  count: 0
}
const mutations = {
  setOrderName(state, name) {
    state.name = name
  },
  setOrderCount(state, count) {
    state.count = count
  }
}
const actions = {

}
const getters = {

}

export default {
  state,
  mutations,
  actions,
  getters
}

Vue 引入

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

import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store // 注入倉庫

const app = new Vue({
  store// 注入倉庫
})

app.$mount()

index.vue

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vuex modules模式下mapState/mapMutations的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!