對vuex進行分模塊管理

以前寫的vuex store裏放一個state 這樣隨着項目愈來愈大，state也會愈來愈大 。

並且考慮多人開發多人維護一個state 也會比較難維護 估計多人開發的必定會分模塊管理state 在redux裏提供了 combineReducers 能夠拆分reducer到組件

翻了下vuex文檔 發現提供了modules 估計能夠按照這個進行拆分 也不是拆分 實際是提供了命名空間 試驗了下

新建了個shop的模塊 

state.js

export default {
  vshop:'123'
}

getters.js

export default {
  ashop:state=>state.vshop+'哈哈'
}

actions.js

export default {
  shopAction(ctx,item){
    ctx.commit('shopMutation',item);
  }
}

mutations.js

export default {
  shopMutation(state,item){
    state.vshop=item;
  }
}

index.js

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

在store/index.js 引入剛纔新建的shop模塊

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import actions from './actions.js'
import mutations from './mutations.js'
import shop from './shop'

Vue.use(Vuex)
export default new Vuex.Store({
  state,
  actions,
  mutations,
  modules:{
    shop
  }
})

在我demo的組件Dataming.vue

computed:{
    ...mapState('shop',{
      vshop:'vshop'
    })
  }

在methods

methods:{
  changeshop(){
      this.shopAction(99099);
    },
    ...mapActions('shop',{
      shopAction:"shopAction"
    }),
    ...mapMutations('shop',{
      shopMutation:'shopMutation'
    })  
}

在模板文件裏放了個

<div>
    {{vshop}}<button @click="changeshop">changeshop</button>
</div>

 

這樣基本完成了一個小的vuex分模塊demo

補充

期中getters.js  相似vue計算屬性 

computed:{
    ...mapState('shop',{
      vshop:'vshop'
    }),
    ...mapGetters('shop',{
      ashop:'ashop'
    })

  }

在模板中 {{ashop}}