web-dev-qa-db-fra.com

Le magasin Vuex n'est pas défini dans le middleware NUXT

Je pratique NUXT et du tutoriel ça marche bien. le mien échoue lors de l'entrée dans le middleware NUXT. la logique est que si la page est redirigée vers une autre page, elle entrera dans le middleware et récupérera le résultat en utilisant axios.

middleware/search.js

import axios from 'axios';

export default function ({ params, store }) {
    console.log(store)

    return axios.get(`https://iTunes.Apple.com/search?term=~${params.id}&entity=album`)
        .then((response) => {
            console.log(response.data.results);
            store.commit('add', response.data.results)
        })
}

en entrant ici le store.commit('add'... résultera

Impossible de lire la propriété "commit" de undefined

quand j'écho commit = indéfini.

Qu'est-ce qui me manque? J'ai déjà essayé this.$store.commit(...) encore indéfini.

VUEX

store/index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      albums: []
    },
    mutations: {
      add (state, payload) {
        state.albums = payload
      }
    }
  })
}

export default createStore
javascriptvue.jsvuexnuxt.js
7
Winston Fale

J'ai trouvé une solution à partir des commentaires dudit didacticiel mais je veux partager ici si d'autres ont du mal aussi.

arrêtez votre serveur de développement ctrl+C

puis redémarrez votre serveur de développement

npm run dev

alors VUEX sera vu maintenant dans le middleware tnx

13
Winston Fale

Le redémarrage du serveur de développement a également fonctionné pour moi. Il semble que Vuex ne soit pas rechargé lorsque des modifications sont apportées.

Courir npm run dev et ça devrait marcher.

4
Tilo Flasche