web-dev-qa-db-ja.com

VuexストアはNUXTミドルウェアで定義されていません

私はNUXTを練習していて、チュートリアルからうまく機能しています。 NUXTミドルウェアに入ると私の失敗。ロジックは、ページが他のページにリダイレクトしている場合、ミドルウェアに入り、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)
        })
}
_

ここに入力すると、_store.commit('add'..._が発生します

未定義のプロパティ「コミット」を読み取れません

commit = undefinedとエコーします。

何が欠けていますか？私はすでにthis.$store.commit(...)を試しましたが、まだ定義されていません。

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
9
Winston Fale

上記のチュートリアルのコメントから解決策を見つけましたが、他の人も苦労している場合はここで共有したいと思います。

開発サーバーを停止する ctrl+C

次に、開発サーバーを再起動します

npm run dev

その後、VUEXはミドルウェアtnxに表示されます

13
Winston Fale

開発サーバーの再起動も私にとってはうまくいきました。変更が行われたときにVuexがリロードされていないようです。

npm run devを実行すると、機能するはずです。

4
Tilo Flasche