vuex-connector-tools v0.0.6

User Guide

import VuexConnector from 'vuex-connector-tools';
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

//you should write this in your stores directory for best practice
//这只是个示例，如果在生产环境中，应该写到store文件夹下
const store = new Vuex.Store({
    modules: {
         moduleA: {
              namespaced: true,
              state: {},
              getters: {},
              mutations: {},
              actions: {}
         },
         moduleB,
         moduleC
    }
});

//you can write this in a seperate js file and export it
//你可以把这个写到一个单独的文件里面，然后export
const connector = new VuexConnector(store)


//you should write this in your containers directory for best practice
//这只是个示例，如果在生产环境中，应该写到containers文件夹下
const HelloContainer = connector.connect("moduleA", {
    mapStateToProps: ({moduleState, props, rootState})=>{
         return {
             ...moduleState,
             someProp: rootState.moduleB.someProp
         }
    },
    mapGettersToProps: ({moduleGetters, rootGetters, props})=>{
         return {
             ...moduleGetters,
             someGetter: xx
         }
    },
    mapMutationsToProps: ({moduleMutations, moduleState, props, rootState})=>{
         return {
             ...moduleMutaions,
             someMutaionFunctionName: "moduleB/someMutaionFunctionName"//moduleName/functionName, read vuex namespace for more details
         }
    },
    mapActionsToProps: ({moduleActions, , moduleState, props, rootState})=>{
         return {
             ...moduleActions,
             someActionFunctionName: "moduleB/someActionFunctionName"//moduleName/functionName, read vuex namespace for more details
         }
    }
})(HelloWorldComponent);


//then use HelloContainer just as you like,for example
//main.js
new Vue({
    el: '#root',
    store,
    render: h => h(HelloContainer)
});