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?
Utilisez les exportations default
dans vos fichiers pour obtenir l'effet souhaité (pas d'exportations nommées sauf dans le index.js
)
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
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>