Bagaimana untuk menyelesaikan masalah "TypeError: Tidak dapat membaca harta 'xxx' undefined" apabila menggunakan vuex dalam aplikasi Vue?

Menggunakan Vuex dalam aplikasi Vue adalah operasi yang sangat biasa. Walau bagaimanapun, kadangkala apabila menggunakan Vuex, anda akan menemui mesej ralat "TypeError: Tidak boleh membaca sifat 'xxx' yang tidak ditentukan". Sebab untuk masalah ini sebenarnya jelas, kerana apabila memanggil harta tertentu Vuex, sifat ini tidak dimulakan dengan betul.

Penyelesaian masalah ini juga sangat mudah. Biasanya, ralat ini disebabkan oleh nilai Vuex tidak dimulakan dengan betul, jadi kita perlu memulakan pembolehubah. Berikut ialah dua contoh:

1 Menggunakan VueX dalam komponen

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

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

Jika kita menggunakan kod di atas dalam kod, tetapi atribut "nama" tidak ditakrifkan dalam Kedai Vuex, maka ralat akan dilaporkan: "TypeError : Tidak boleh membaca sifat 'nama' undefined "Untuk menyelesaikan masalah ini, kita hanya perlu menambah sifat nama pada Kedai Vuex dan memulakannya.

2. Mulakan pembolehubah dalam Kedai 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

Dalam kod di atas, kami memulakan atribut "nama" yang hanya mengisytiharkan rentetan kosong. Dengan cara ini, ralat "TypeError: Cannot read property 'name' of undefined" tidak akan muncul semasa membuat panggilan.

Untuk meringkaskan, ralat ini sangat biasa, tetapi ia juga sangat mudah untuk diselesaikan Anda hanya perlu memulakan pembolehubah Vuex dengan betul dalam aplikasi. Dengan cara ini kita boleh mendapatkan nilai yang betul dan menggunakan Vuex dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah "TypeError: Tidak dapat membaca harta 'xxx' undefined" apabila menggunakan vuex dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!