web-dev-qa-db-fra.com

Comprendre l'état et les getters à Nuxt.js: getters ne fonctionnera pas

je suis nouveau à Vue et NUXT et je construisons mon premier site Web en mode universel avec ces cadres.

Je suis un peu confus sur la façon dont le magasin travaille à Nuxt, depuis la suite de la documentation officielle, je ne peux pas atteindre ce que j'ai à l'esprit.

Dans mon dossier de mon magasin, j'ai placé pour l'instant un seul fichier appelé "Produits.Js", là, j'exporte l'état comme celui-ci:

export const state = () => ({

  mistica: {
    id: 1,
    name: 'mistica'
    }
})

(L'objet est simplifié afin de fournir une explication plus propre)

Dans le même fichier, j'ai configuré un simple getter, par exemple:

export const getters = () => ({

    getName: (state) => {
      return state.mistica.name
    }
})

Maintenant, selon la documentation, dans le composant, j'ai configuré comme ceci:

computed: {
 getName () {
  return this.$store.getters['products/getName']
 }
}

ou soit (ne sait pas quoi utiliser):

computed: {
 getName () {
  return this.$store.getters.products.getName
 }
}

mais lorsque vous utilisez "getname" dans le modèle, "non défini" est "non défini", dans ce dernier cas, l'application est cassée et dit "Impossible de lire la propriété" getname "de non défini"

Notez que dans le modèle, je peux accéder directement à la valeur de l'état avec "$ Store.state.products.mistica.name" sans problèmes, pourquoi donc?

Qu'est-ce que je fais mal, ou mieux, que n'ai-je pas compris?

vue.jsvuexnuxt.js
9
Stefano Franceschetto

Couple de choses. Dans votre dossier "Store", vous pourriez avoir besoin d'un index.js pour NUXT pour définir un module racine. Ceci est le seul module que vous pouvez utiliser nuxtServerInit en même temps et qui peut être très pratique.

Dans vos produits.js, vous faites partie du chemin. Votre état doit être exporté en tant que fonction, mais des actions, des mutations et des getteurs ne sont que des objets. Alors changez vos getters à ceci:

export const getters = {
    getName: state => {
      return state.mistica.name
    }
}

Ensuite, votre deuxième calcul doit obtenir le getter. Je préfère généralement utiliser des "Mapetters" que vous pouvez implémenter dans une page/composant comme celui-ci:

<script>
import {  mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      getName: 'products/getName'
    })
}
</script>

Ensuite, vous pouvez utiliser GetName dans votre modèle avec {{ getName }} ou dans votre script avec this.getName.

2
Andrew1325