Nuxt.js: Reconsider to keep the Vuex 'classic' mode

[stevefan1999-personal]

What problem does this feature solve?

Currently, the exclusion of the so-called Vuex classic mode store creation method will commit in Nuxt 3, and by doing so blocks the usage of sascha245/vuex-simple that it returns a cooked Vuex store.

What does the proposed changes look like?

So I pledge the Nuxt team to think about letting the classic mode to live on, perhaps in another form like adding a new config in nuxt.config.js:

...
export const store = {
  factory: `~/store/createStore.ts`
}
...

_{This feature request is available on Nuxt community (#c8596)}

[Atinux]

Hi @stevefan1999-personal

Thank you for this feature request, indeed, we want to deprecate the classic mode to open more possibilities for the store/ directory.

The idea would be to have a configuration to explain which module do you want to use for the store/ directory:

nuxt.config.js:
``js export default { store: 'vuex-simple-module' // default to@nuxt/vue-app-store`
}

[IPRIT]

Agree with that. My company using classic mode in production and we are built easy to use module system on top of classic mode.

Step 1.

// File: src/utils/vue/vuex.js
/**
 * @param module
 * @returns {Object}
 */
export function resolveDynamicState (module) {
  return typeof module.state === 'function'
    ? module.state()
    : module.state;
}

/**
 * @param module
 * @returns {Object}
 */
export function resolveVuexModules (module) {
  return module && (
    module.modules || module.createModules && module.createModules()
  ) || {};
}

/**
 * @param {Object} modules
 * @param {boolean} namespaced
 * @returns {Object}
 */
export function createVuexModules (modules, namespaced = true) {
  return Object.keys( modules ).reduce((preparedModules, moduleName) => {
    const module = modules[ moduleName ];

    return Object.assign(preparedModules, {
      [moduleName]: {
        namespaced, // should module be namespaced (namespace/action)

        state: resolveDynamicState( module ),
        getters: module.getters || {},
        actions: module.actions || {},
        mutations: module.mutations || {},
        modules: resolveVuexModules( module )
      }
    });
  }, {});
}

Step 2.

// File: src/store/root/modules.js
import { createVuexModules } from '../../utils';

// Modules
import * as debug from '../debug';
import * as dictionaries from '../dictionaries';
import * as messages from '../messages';
import * as passport from '../passport';
import * as region from '../region';
import * as ui from '../ui';
import * as user from '../user';

const modules = {
  debug,
  dictionaries,
  messages,
  passport,
  region,
  ui,
  user
};

/**
 * @returns {Object}
 */
export function createModules () {
  return createVuexModules( modules );
}

Step 3.

// File: src/store/index.js
import Vuex from 'vuex';

import { resolveDynamicState } from '../utils';

import * as root from './root';

export default function createStore () {
  return new Vuex.Store({
    state: resolveDynamicState( root ),
    getters: root.getters,
    actions: root.actions,
    mutations: root.mutations,

    modules: root.createModules()
  });
};

Each module is a directory with following files structure:

[shaunc]

Indeed, there should be some mechanism to consume modules (and maybe stores?...) imported from other places, such as Vuex-simple-based modules. (Eg I have written a library to deal with auth-related state as a Vuex-simple module. I'd be happy to "mix-in-match", writing other modules in the new way, but need some method to say "include this module".)

[shalldie]

Is there any way to use constants in modules mode ?

modules mode has a namespace named by file's name, so i chose classic mode, i think tips in editor are important and nice.

It is a bay way to use string like dispatch('someNamespace/someAction')，dispatch(types.someAction) may be fine.

[sobolevn]

This is related to https://github.com/wemake-services/wemake-vue-template/issues/1039 in wemake-vue-template

I would also like to use nuxt with vuex-simple, since otherwise I cannot fully rely on my TypeScript typing, which is a bad thing.

Having "classic" vuex mode (or something similar like the discussed factory) in nuxt is essential here, since otherwise it would not be possible to integrate tools like vuex-simple.