Vuex store is undefined in NUXT middleware

若如初见. 提交于 2020-01-01 09:09:07

问题


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

回答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




回答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.



来源:https://stackoverflow.com/questions/50120277/vuex-store-is-undefined-in-nuxt-middleware

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!