Vue アプリケーションで vuex を使用する際に「TypeError: Unknown のプロパティ 'xxx' を読み取れません」という問題を解決するにはどうすればよいですか?

Vue アプリケーションで Vuex を使用することは、非常に一般的な操作です。ただし、Vuex を使用しているときに、「TypeError: 未定義のプロパティ 'xxx' を読み取れません」というエラー メッセージが表示されることがあります。このエラー メッセージは、未定義のプロパティ "xxx" を読み取れず、プログラム エラーが発生することを意味します。この問題の理由は実際には明らかで、Vuex の特定のプロパティを呼び出すときに、このプロパティが正しく初期化されないためです。

この問題の解決策も非常に簡単です。通常、このエラーは Vuex 値が正しく初期化されていないことが原因で発生するため、変数を初期化する必要があります。以下に 2 つの例を示します:

1. コンポーネントで VueX を使用する

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['name'])
    }
  }
</script>

コード内で上記のコードを使用するが、「name」属性が Vuex ストアで定義されていない場合、次に、エラーが報告されます:「TypeError: 未定義のプロパティ 'name' を読み取れません。」 この問題を解決するには、name 属性を Vuex ストアに追加して初期化するだけです。

2. Vuex ストアで変数を初期化する

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: '' // 需要先进行初始化
  },
  mutations: {
    SET_NAME(state, name) { //进行更改，并重新赋值
      state.name = name
    }
  },
  actions: {
    setName({commit}, name) { //dispatch对应的方法
      commit('SET_NAME', name)
    }
  },
  getters: {
    name: (state) => {
      return state.name //getters同样需要返回一个指定的属性
    }
  }
})

export default store

上記のコードでは、空の文字列のみを宣言する「name」属性を初期化します。このようにすると、呼び出し時に「TypeError: Cannot read property 'name' of unknown」というエラーは表示されなくなります。

要約すると、このエラーは非常に一般的ですが、解決するのも非常に簡単で、アプリケーションで Vuex 変数を適切に初期化するだけで済みます。こうすることで、正しい値を取得し、Vuex をより適切に使用できるようになります。

以上がVue アプリケーションで vuex を使用する際に「TypeError: Unknown のプロパティ 'xxx' を読み取れません」という問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。