Vue エラー解決 [Vue 警告]: レンダリング時のエラー: 「TypeError: 未定義のプロパティ 'state' を読み取れません」

エラーを報告する

Vue2 プロジェクトでエラーが報告されました:
[Vue の警告]: レンダリング時のエラー: 「TypeError: 未定義のプロパティ 'state' を読み取れません」
[Vue の警告]: マウントされたフックのエラー: 「TypeError: 未定義のプロパティ 'dispatch' を読み取れません」
ここに画像の説明を挿入します

よくある原因

このエラーメッセージは通常、Vue コンポーネントで表示され、Vuex ストアの状態オブジェクトを読み取ろうとしますが、オブジェクトが定義されていません。これは、次のようないくつかの理由によって引き起こされる可能性があります。

1. Vuex ストアモジュールが正しくインポートされていません。Vue コンポーネントで次のコードを使用してストアをインポートできます。

import store from '@/store'

これは、store.js ファイルが src/store ディレクトリにあることを前提としています。store.js ファイルが別のディレクトリにある場合は、それに応じてインポートパスを変更します。

2. コンポーネントが Vuex ストアに正しく接続されていません。Vue コンポーネントで次のコードを使用して、コンポーネントを Vuex ストアに接続できます。

import {
    
     mapState } from 'vuex'

export default {
    
    
  computed: {
    
    
    ...mapState(['myState'])
  }
}

ここでの MyState は、Vuex ストアで定義された状態名です。コンポーネント内で他の名前が使用されている場合は、それに応じてコードを変更してください。

3. 必要な状態が Vuex ストアで定義されていません。
このエラーは、使用しようとしている状態が Vuex ストアで定義されていない場合に発生します。状態は、次のコードを使用して、store.js ファイルで定義できます。

const state = {
    
    
  myState: null
}

解決

コードを何度も確認した結果、そのような問題がないことがわかりました。それで、バージョンの問題かどうかを確認したかったので、package.json を開いたところ、vuex がバージョン 4 であることがわかりました。
ここに画像の説明を挿入します
これが解決策です。
次のコマンドを実行して Vuex 4 をアンインストールします。

npm uninstall vuex

次のコマンドを実行して Vuex 3 をインストールします。

npm install vuex@3