Невозможно прочитать свойства undefined (чтение «геттеров»)
Может ли кто-нибудь помочь с приведенным ниже, я получаю следующую ошибку Невозможно прочитать свойства неопределенного (чтение «геттеров»)
Я работаю над проектом, в котором мои магазины должны возвращать массив в мой index.vue.
Есть ли способ обойти это без использования магазина Vuex?
Каталог моего магазина содержит следующие файлы
index.js
export const state = () => ({})
парковкаPlaces.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.info('http://localhost:8000/api/parkingPlace')
// // console.info(process.env.API_URL)
// // const response = await this.$axios.$get('PARKING_PLACE')
// //
// // console.info('response', response)
//
// // console.info(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
};
Изображение моего каталога файлов ниже
изображение ошибки
Привет @Delavanlonden, я добавил это выше
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
ВparkPlaces.js: попробуйте использовать import {getters} from '../plugins/base.js' вместо import {getters} from '../plugins/base'.
В base.us: попробуйте использовать import getters from './getters.js' вместо import getters from './getters'.
Эй, я пробовал это много раз раньше, но, похоже, не исправляет ошибку. Спасибо за вклад :)
Я также пробовал это, но не повезло :( Я перебрал все возможные вещи, которые могут быть в течение нескольких дней, и эта ошибка все еще существует.
@newToBeingNerdy есть ли номер строки с сообщением об ошибке? Или любая другая информация?
Я обновил свой пост выше, чтобы показать изображение ошибки, в IDE ошибок нет.
Я считаю, что у вас проблема с пространством имен или ваш магазин неправильно инициализирован.
Убедитесь, что вы зарегистрировали свой parkingPlaces.js модуль с namespaced свойством -
import parkingPlacesModule from './parkingPlaces.js';
const store = new Vuex.Store({
modules: {
parkingPlaces: {
namespaced: true,
...parkingPlacesModule
}
}
});
Кроме того, вы можете передать имя хелперу mapGetters, например:
computed: {
...mapGetters('parkingPlaces', [
'all', // -> this.all
])
}
зачем вам нужно управление состоянием:
Vuex — это шаблон управления состоянием + библиотека для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов приложения с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом.
сегодня вы можете попробовать nuxt3 тогда у вас есть доступ к Nuxt3 управлению состоянием или попробуйте Pinia не Vuex это лучшие варианты для Vue3.
если вы хотите использовать Vue2, Nuxt2 и Vuex для управления состоянием, то:
во-первых, почему ваш файл геттеров находится в плагинах?
используйте эту структуру:
|__магазин
⠀⠀|__ index.js
⠀⠀|__ getters.js
содержимое вашего файла getter должно быть таким:
export default {
//your getters
};
затем вы можете импортировать эти геттеры в свой файл index.js следующим образом:
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
}
})
вы можете разделить файлы, и структура будет:
|__ магазин
⠀⠀|__ index.js # куда собираем модули и экспортируем магазин
⠀⠀|__actions.js # корневые действия
⠀⠀|__mutations.js # корневые мутации
⠀⠀|__ модулей
⠀⠀⠀⠀|__ moduleA.js # модульA модуль
⠀⠀⠀⠀|__ moduleB.js # модуль moduleB
Спасибо, что потратили свое драгоценное время на то, чтобы обучить меня этому. ;)
рада помочь моему другу
Вы можете попробовать это следующими способами
В геттерах.js
export const getters = {
all: state => state.all
};
В base.js
export * from "./getters";
Этот вышеприведенный способ сделает ваш файл base.js объектом, предоставляющим getters объект.
Вы можете добавить свой каталог файлов? или скриншот