Documentation Request: Vuex Module async functions rollup nuxt #1536

SumNeuron · 2019-04-19T13:34:02Z

What problem does this feature solve?

To my understanding Vuex Plugins and Vuex modules are in essence different. Plugins alter an existing store / module, modules provide some completed state based functionality.

Therefore it can often be the case where a reusable and freely distributed module is desirable (e.g. to include in multiple projects or multiple component libraries).

At the moment Vuex's documentation strikes a surprising balance of brevity and coverage (although in my opinion plugins could use some more expansion). However, the mention of how to make and distribute vuex modules is completely absent.

Since Vue and the Vue ecosystem has lowered the barrier to entry to web development, not using Vue has complete coverage of the nuances of JavaScript and the many core libraries that help it work on the web (e.g. Babel)

Thus it would be relevant and beneficial to provide a complete example (even if it is minimal) of how to make a truly reusable module.

What does the proposed API look like?

I would consider something simplistic (e.g. the counter app). However, I would suggest 2 modifications:

an async / await version (as this can cause trouble with bundling)
a typescript variant

// reusable module

const state = () => ({
  count: 0,
  delay: 500
})

const getters = {

}

const actions = {
  async updateCount({state, commit}, byHowMuch) {
    let newCount = await setTimeout( () => state.count   byHowMuch, state.delay)
    commit('setCount', newCount)
  }
}

const mutations = {
  setCount(state, amount) {
    state.count = amount
  }
}


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

then provide the configuration file for how to use rollup and deploy to npm / yarn

then provide how to incorporate with nuxt

// <nuxt-project>/store/AsyncCountModule/index.js
import AsyncCountModule from 'AsyncCountModule'

export AsyncCountModule //<-- this doesnt work

SumNeuron · 2019-04-21T07:14:02Z

I have something that sort of works (https://gitlab.com/SumNeuron/nuet)
There is a rollup complaint of circular dependencies for a Vuetify component, but excluding that should be fine

https://codesandbox.io/s/kw4o78ol1r?fontsize=14

LinusBorg · 2019-04-28T09:17:43Z

I'm unsure what kind of information is missing for you.

I don't think we should document how to publish something to npm as this is a fairly general concept that's not related to vuex at all.

And in the code you shared, the line marked as "this doesn't work" uses invalid ESModule export syntax. Also unrelated to vuex.

SumNeuron · 2019-04-29T08:34:46Z

Well I sort of cobbled it together... although the rollup config to get async / await to work as well as to rollup vue components was a bit tricky.

Publishing to npm is general yes, but it is the next extension of a vuex module?

Is that line invalid? It ends up working... so not sure why that is 🙃

I guess some of this stuff is more technical to rollup / vue / general JS development, but would've personally liked to find in the vuex docs / examples.

Basically something like a "whats next" after the module section about how to share it / reuse it in other projects without copy pasting code.

LinusBorg · 2019-04-29T09:02:59Z

Publishing to npm is general yes, but it is the next extension of a vuex module?

I'd argue: no. In most cases, vuex contains state and business logic that is very specific to your application, so it doesn't make sense to publish it as its own package.

In the few situation where it's actually re-usable, it's usually in combination with a component or other entities within a plugin/component, where you wouldn't export the module on its own but take care of registering in the setup process of that library/plugin.

So I don't see it as a very important concept to document in the vuex docs specifically.

SumNeuron · 2019-04-29T11:27:24Z

I agree. Normally a vuex module is developed along side the components that interface with it. However, it might also be de-coupled such that the module functionality can be reused and the interface components can be reworked as needed.

For example, what led me down this road is that recently I have been undertaking a foray into firebase, which one can use for user-authentication / authorization. The code / state of the user belongs to a vuex module. The interface components (sign-up form, sign-in form, etc) take a module name as a prop which is expect to direct the components to the vuex module. However one could, if they wanted to not rewrite the vuex module / firebase specific code, rewrite the interface components to give a different look or augment some functionality. Another example of this might be a Markdown editor vuex module.

This is definitely a more niche case I suppose...

If the intended use of a vuex module is as you describe above (module + vue components that register and handle it), it is my personal opinion a full example of how to do that from vue create to publish is a worthwhile example. It may also be worthwhile then to add to the docs that modules are intended to be registered by the components that use them, rather than passed a prop pointing to the module to use?

I specifically think this because I am one of the people who do not come from the world of front end / web-dev. Rather, Vue and the Vue community have lowered the barrier to entry by building many tools that make it ease to build amazing things (e.g. by sequestering away the webpack setup). So for me to figure out how to do this, was an non-trivial ordeal that might discourage others (with a similar background) from contributing.

But I'm a new comer and less experienced so if you think this isn't the use case or a more detailed / advanced example is not needed, then I'll take your expertise as more apt to gauge this :)

kiaking · 2020-04-23T06:55:02Z

I understand packaging is tough to setup as a new comer, though still this is not really related to Vuex, so I think we should have better resources somewhere else.

kiaking closed this Apr 23, 2020

Oct	NOV	Dec
	10
2019	2020	2021

vuejs / vuex

Documentation Request: Vuex Module async functions rollup nuxt #1536

Documentation Request: Vuex Module async functions rollup nuxt #1536

SumNeuron commented Apr 19, 2019

SumNeuron commented Apr 21, 2019

LinusBorg commented Apr 28, 2019

SumNeuron commented Apr 29, 2019

LinusBorg commented Apr 29, 2019

SumNeuron commented Apr 29, 2019

kiaking commented Apr 23, 2020

vuejs / vuex

Sponsor vuejs/vuex

Join GitHub today

Documentation Request: Vuex Module async functions rollup nuxt #1536

Documentation Request: Vuex Module async functions rollup nuxt #1536

Comments

SumNeuron commented Apr 19, 2019

What problem does this feature solve?

What does the proposed API look like?

SumNeuron commented Apr 21, 2019

LinusBorg commented Apr 28, 2019

SumNeuron commented Apr 29, 2019

LinusBorg commented Apr 29, 2019

SumNeuron commented Apr 29, 2019

kiaking commented Apr 23, 2020

Essential cookies

Always active

Analytics cookies