无法读取未定义属性（读取'getters'）的值。

Question

有人能帮我解决下面的问题吗？我得到了以下错误：Cannot read properties of undefined (reading 'getters')

我正在开发一个项目，在该项目中我的 store 应该向我 index.vue 返回一个数组。

也有没有任何方法可以不使用 Vuex store 即可绕过这个问题？

我的 store 目录包含以下文件：

index.js

export const state = () => ({})

parkingPlaces.js

import {getters} from '../plugins/base'

const state = () => ({
  all: []
});

export default {
  state,
  mutations: {
    SET_PARKINGPLACES(state, parkingPlaces) {
      state.all = parkingPlaces
    }
  },
  actions: {
    async ENSURE({commit}) {

        commit('SET_PARKINGPLACES', [
          {
          "id": 1,
          "name": "Chandler Larson",
          "post": "37757",
          "coordinates": {
            "lng": -1.824377,
            "lat": 52.488583
          },
          "total_spots": 0,
          "free_spots": 0
        },
        ]
        )
      }
    },
  getters: {
    ...getters
  }
}

index.vue

<template>
  <div class="min-h-screen relative max-6/6" >
    <GMap class="absolute inset-0 h-100% bg-blue-400"
      ref="gMap"
      language="en"
      :cluster="{options: {styles: clusterStyle}}"
      :center="{lat:parkingPlaces[0].coordinates.lat, lng: parkingPlaces[0].coordinates.lng}"
      :options="{fullscreenControl: false, styles: mapStyle}"
      :zoom="5"
    >
      <GMapMarker
        v-for="location in parkingPlaces"
        :key="location.id"
        :position="{lat: location.coordinates.lat, lng: location.coordinates.lng}"
        :options="{icon: location.free_spots > 0 ? pins.spacefree : pins.spacenotfree}"
        @click="currentLocation = location"
      >
        <GMapInfoWindow :options="{maxWidth: 200}">
          <code>
            lat: {{ location.coordinates.lat }},
            lng: {{ location.coordinates.lng }}
          </code>
        </GMapInfoWindow>
      </GMapMarker>
      <GMapCircle :options="circleOptions"/>
    </GMap>
  </div>
</template>

<script>

import {mapGetters, mapActions} from 'vuex';




export default {




 // async mounted() {
 //   //  // console.log('http://localhost:8000/api/parkingPlace')
 //   // console.log(process.env.API_URL)
 //   // const response = await this.$axios.$get('PARKING_PLACE')
 //   //
 //   //  console.log('response', response)
 //
 //   // console.log(location)
 //  },

  data() {
    return {
      currentLocation: {},
      circleOptions: {},
      // parkingPlaces: [
      //array of parkingPlaces
      // ],
      pins: {
        spacefree: "/parkingicongreen3.png",
        spacenotfree: "/parkingiconred3.png",
      },
      mapStyle: [],
      clusterStyle: [
        {
          url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
          width: 56,
          height: 56,
          textColor: "#fff"
        }
      ]
    }
  },

  computed: {
    ...mapGetters({
      'parkingPlaces': "parkingPlaces/all"
    })
  },

  async fetch() {
    await this.ensureParking()
  },
  methods: {
    ...mapActions({
      ensureParking: 'parkingPlaces/ENSURE'
    })
  }
 }
</script>

base.js

import getters from "./getters";

export {getters};

getters.js

export default {
  all: state => state.all
};

下面是我文件目录的图像，如下所示： 以下是错误的图像：

- newToBeingNerdy

---

你可以添加你的文件目录吗？或者截个屏。 - Delano van londen

嗨@Delanovanlonden，我已经添加了这个。 - newToBeingNerdy

请查看以下链接，其中有关于Nuxt 3模块的介绍，可能对您有所帮助：https://dev.to/jacobandrewsky/introduction-to-nuxt-3-modules-5h8o - Delano van londen

Answer 1

我认为你遇到了命名空间问题，或者你的存储器没有正确初始化。 确保使用namespaced属性注册你的parkingPlaces.js模块 -

import parkingPlacesModule from './parkingPlaces.js';
const store = new Vuex.Store({
  modules: {
    parkingPlaces: {
      namespaced: true,
      ...parkingPlacesModule
    }
  }
});

此外，您可以将名称传递给mapGetters助手程序，如下所示：

computed: {
  ...mapGetters('parkingPlaces', [
    'all', // -> this.all
  ])
}

- Evgeni Dikerman

Answer 2

为什么你需要状态管理：

Vuex 是一个针对 Vue.js 应用程序的状态管理模式 + 库。它作为应用程序中所有组件的集中存储，并通过规则确保状态只能以可预测的方式进行变异。

今天你可以尝试 Nuxt3，然后使用 Nuxt3 的状态管理，或者尝试 Pinia 而不是 Vuex，这些都是 Vue3 的更好选择。

如果你想使用 Vue2、Nuxt2 和 Vuex 作为状态管理，则应该注意以下结构：

首先，你的 getters 文件为什么在插件文件夹里？

使用以下结构： |__store

⠀⠀|__ index.js

⠀⠀|__ getters.js

你的 getters 文件内容应该像这样：

export default {
 //your getters
};

然后你可以像这样在你的index.js文件中导入这些getter：

import getters from "./getters";
const store = createStore({
  state () {
    return {
      something: 0
    }
  },
  getters
})

然后你使用 mapGetters：

...mapGetters({
  parkingPlaces: 'all'
})

如果您有另外一家商店，应该使用模块：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

您好！这段文字的翻译如下：

您可以将文件分离，结构将会是：

|__ store

⠀⠀|__ index.js # 在此组装模块并导出存储库

⠀⠀|__ actions.js # 根操作

⠀⠀|__mutations.js # 根变更

⠀⠀|__ modules

⠀⠀⠀⠀|__ moduleA.js # 模块A模块

⠀⠀⠀⠀|__ moduleB.js # 模块B模块

- sadeq shahmoradi

---

感谢您抽出宝贵的时间教育我。 ;) - newToBeingNerdy

很高兴能帮助我的朋友。 - sadeq shahmoradi

Answer 3

您可以通过以下方式尝试它：

在 getters.js 中：

export const getters = {
  all: state => state.all
};

在base.js中

export * from "./getters";

使用上述方式将使您的文件 base.js 成为提供 getters 对象的对象。

- Rohit Khandelwal

Answer 4

在 parkingPlaces.js 中：尝试使用 import {getters} from '../plugins/base.js' 替代 import {getters} from '../plugins/base'。

在 base.us 中：尝试使用 import getters from './getters.js' 替代 import getters from './getters'。

- asdf3.14159

---

嘿，我之前尝试过很多次，但似乎无法修复错误。谢谢你的建议 :) - newToBeingNerdy

我也尝试过，但没有运气:(我已经经过了所有可能的事情，这个错误仍然存在。 - newToBeingNerdy

@newToBeingNerdy，错误信息中有行号吗？或者还有其他信息吗？ - asdf3.14159

我已经更新了我的上面的帖子，以展示出现的错误图片，在IDE中没有错误。 - newToBeingNerdy