Vuex store is undefined in NUXT middleware

Question

I'm practicing NUXT and from tutorial its working well. mine fail when entering the NUXT middleware. the logic is if page is redirecting to other page it will enter middleware and fetch the result using 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)
        })
}

when entering here the store.commit('add'... will result

Cannot read property 'commit' of undefined

when I echo commit = undefined.

What I'm missing? I already tried this.$store.commit(...) still undefined.

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

Solution 1

I found a solution from the comments of the said tutorial but I want to share here if others struggle it too.

halt your development server ctrl+C

then restart the your dev server

npm run dev

then VUEX will be seen now in the middleware tnx

Solution 2

Restarting the Dev Server worked for me as well. It seems Vuex isn't reloaded when changes are made.

Run npm run dev and it should work.

Comments

[lasec0203]

It's doesn't seem the dev server rebuilds the vue store, this left me scratching my head for a couple of hours...smh