vuex-connector-tools
v0.0.6
Published
connector for vuex
Downloads
10
Maintainers
Readme
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)
});