web-dev-qa-db-fra.com

Nuxt + Vuex - Comment diviser un module Vuex en fichiers séparés?

Dans la documentation de Nuxt ( here ), il est indiqué "Vous pouvez éventuellement décomposer un fichier de module en plusieurs fichiers: state.js, actions.js, mutations.js et getters.js."

Je n'arrive pas à trouver d'exemples de la façon dont cela est fait - il y a eu beaucoup de décomposition du magasin Vuex au niveau racine en state.js, actions.js, mutations.js et getters.js, et en fichiers de module individuels, mais rien ne décrit la décomposition des modules eux-mêmes.

Donc actuellement j'ai:

     ├── assets
     ├── components
     └── store
           ├── moduleOne.js
           ├── moduleTwo.js
           └── etc...

Et ce que j'aimerais avoir, c'est:

     ├── assets
     ├── components
     └── store
           └── moduleOne
                 └── state.js
                 └── getters.js
                 └── mutations.js
                 └── actions.js
           └── moduleTwo
                └── etc...

Pour essayer ceci, dans /store/moduleOne/state.js j'ai:

export const state = () => {
    return {
        test: 'test'
    }
};

et dans /store/moduleOne/getters.js j'ai:

export const getters = {
    getTest (state) {
        return state.test;
    }
}

Dans mon composant, j'accède à cela avec $store.getters['moduleOne/getters/getTest']

Cependant, en utilisant debugger et Vue devtools, il semble que state n’est pas accessible dans le fichier getters - il semble rechercher un état dans le fichier local, donc state.test est indéfini.

Tenter d'importer state de mon fichier state.js dans mon fichier getters.js ne semble pas fonctionner non plus.

Quelqu'un at-il un exemple de la façon dont il a réussi à décomposer le magasin de cette manière dans Nuxt?

javascriptvue.jsvuexnuxt.jsnuxt
6
Guy Harper

Votre problème

Utilisez les exportations default dans vos fichiers pour obtenir l'effet souhaité (pas d'exportations nommées sauf dans le index.js)

Exemple

Vous trouverez un exemple directement dans la suite de tests Nuxt.js (à https://github.com/nuxt/nuxt.js/tree/dev/test/fixtures/basic/store/foo ).

Si vous exécutez le projecteur basic et accédez à la page/store, vous verrez le résultat suivant

 enter image description here

Le contenu "répété" dans le module lui-même montre simplement que les valeurs de division sont prioritaires (sinon, getVal ne renverrait pas 10 mais 99 et state.val ne serait pas 4 mais 2).

code store.vue:

<template>
  <div>
    <h1>{{ baz }}</h1>
    <br>
    <p>{{ $store.state.counter }}</p>
    <br>
    <h2>{{ getVal }}</h2>
    <br>
    <h3>{{ getBabVal }}</h3>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('foo/bar', ['baz']),
    ...mapGetters('foo/blarg', ['getVal']),
    ...mapGetters('bab', ['getBabVal'])
  }
}
</script>
0
manniL