New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Access modules easily from store #1469

Open
superbiche opened this Issue Dec 8, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@superbiche
Copy link

superbiche commented Dec 8, 2018

What problem does this feature solve?

I'd like to register dynamically a module that would have access to already registered modules - native module, with custom attributes - thus allowing these modules to leverage presenters and other utilities.
Currently I can do this with store._modules.root._children but the fact it takes two _ makes me feel I'm doing something really dirty

What does the proposed API look like?

Something like store.getModules = () => store._modules.root._children

@hqzh

This comment has been minimized.

Copy link

hqzh commented Dec 18, 2018

`import { createNamespacedHelpers } from "vuex";
const {
mapState,
mapGetters,
mapActions,
mapMutations
} = createNamespacedHelpers("storeName");

computed: {
...mapState(["message"]),
},
`

@superbiche

This comment has been minimized.

Copy link

superbiche commented Dec 18, 2018

@hqzh actually I'm offering modules the ability to register more components than actions/getters/mutations and so. Kind of a way to hook into Vuex and offer optional complementary features (API automation, automating sync with WebSockets...)

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

export default {
  namespaced: false,
  state,
  actions,
  mutations,
  getters,
  presenters,
}

And here is how I currently load the presenters and bind them to the store:

/**
 * Retrieve any Vuex store module that is not namespaced.
 *
 * @param store
 * @returns {*}
 */
const getStoreModules = store => reduce(store._modules.root._children, (acc, mod, key) => {
	if (mod.namespaced !== true) {
		acc[key] = mod
	}
	return acc
}, {})

const loadModuleStorePresenters = modules => reduce(modules, (acc, mod) => {
	if (mod._rawModule.presenters && mod._rawModule.presenters.store) {
		acc = {
			...acc,
			...mod._rawModule.presenters.store
		}
	}
	return acc
}, {})

export const applyPresenters = store => {
	const modules = getStoreModules(store)
	const presenters = loadModuleStorePresenters(modules)

	if (presenters) {
		store.presenters = presenters
	}
	return store
}

Does feel a lot hacky but it works.

@hqzh

This comment has been minimized.

Copy link

hqzh commented Jan 9, 2019

@superbiche When using Vuex modules in strict mode,I also have this question.

computed: {
  message: {
    get () {
      return this.$store._modules.root.state.modulesName.message;   //to long
    },
    set (value) {
      this.commit('updateMessage', value)
    }
  }
}

a temp solution

computed: {
  ...mapState(["message"]),
  messageTemp: {     // v-model  this
    get () {
      return this.message
    },
    set (value) {
      this.commit('updateMessage', value)
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment