Nuxt.js中

vue.js

2024-03-17 05:56:05

在 Nuxt.js 中解决“无法读取 undefined 的属性 '_normalized'”错误

简介

在使用 Nuxt.js 从后端获取数据时，开发人员可能会遇到以下错误：“无法读取 undefined 的属性 '_normalized'”。本指南旨在全面介绍此错误的原因以及如何对其进行故障排除。

错误原因

此错误通常表明 Vuex 状态管理存在问题。特别是，它表示尝试访问未定义的属性。导致此问题的常见原因包括：

asyncData 方法未正确返回数据
Vuex 状态未正确映射
后端控制器未返回有效响应
Axios 请求配置错误

解决方案

解决此错误涉及以下步骤：

1. 检查 asyncData 方法

确保 asyncData 方法返回一个包含所需状态数据的对象。

2. 检查 Vuex 状态管理

检查 Vuex 存储中是否正确注册了状态模块并使用 mapState 辅助函数对其进行了映射。

3. 检查后端控制器

确保后端控制器返回正确的 JSON 响应，其中包含请求的数据。

4. 检查 Axios 请求

验证 Axios 请求是否正确配置，包括 URL、请求参数和请求头。

5. 使用 Vue Devtools

利用 Vue Devtools 调试 Vuex 状态和组件数据，找出导致错误的根本原因。

示例代码

store/index.js：

export default new Vuex.Store({
  state: {
    services: [],
  },
  getters: {
    getServices: state => state.services,
  },
  mutations: {
    setServices: (state, services) => {
      state.services = services;
    },
  },
  actions: {
    fetchServices: async ({ commit }, id) => {
      const response = await app.$axios.get(`/store/get-services`, { params: { id } });
      commit('setServices', response.data.services);
    },
  },
});

pages/index.vue：

<template>
  <div>
    <div class="services-list">
      <h4 class="is-vcentered title has-text-centered has-text-grey-light" v-if="services.length == 0">No Services</h4>
      <ul>
        <li v-for="service in services" :key="service.id"><nuxt-link>{{ service.title }}</nuxt-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('services', ['services']),
  },
  asyncData({ app }) {
    return app.$store.dispatch('fetchServices', app.$auth.user.store.id);
  },
};
</script>

后端控制器（Laravel）：

public function store_ads(Request $req){
    if($req->user()->store->id != $req->id){
        abort(403);
    }
    $services = Store::with('ads')->where('id',$req->id)->first();
    return response()->json(['services'=>$services],200);
}