无法读取未定义的属性(读取“getter”)

Question

有谁能帮到以下忙吗，我得到了以下错误:无法读取未定义的属性(读取'getters')

我正在进行一个项目，在这个项目中，我的商店应该将数组返回到我的index.vue。

还有什么办法可以让我不用使用Vuex商店就能解决这个问题吗？

我的存储目录包含以下文件

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
};

下面文件目录的图像

​

误差图像

​

Answer 1

为什么您需要国家管理：

Vuex是一个用于Vue.js应用程序的状态管理模式+库。它作为应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式发生变化。

今天的您可以尝试 nuxt3 ，然后您可以访问 Nuxt3 状态管理，或者尝试 皮尼亚 E 111而不是Vuex --这些都是Vue3的更好选择。E 212

如果您想使用Vue2、Nuxt2和Vuex作为状态管理，那么：

首先，为什么您的getter文件在插件中？

使用此结构：

|__store

⠀⠀|__ index.js

⠀⠀|__ getters.js

您的getter文件内容应该如下所示：

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
  }
})

您可以分离文件，结构如下：

|__商店

⠀⠀|__ index.js #，在这里我们组装模块并导出存储

⠀⠀|__ actions.js #根操作

⠀⠀|__mutations.js #根突变

⠀⠀|__模块

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

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

Answer 2

在parkingPlaces.js中:尝试使用import {getters} from '../plugins/base.js'而不是import {getters} from '../plugins/base'。

在base.us中:尝试使用import getters from './getters.js'而不是import getters from './getters'。

Answer 3

我相信您有名称空间问题，或者您的存储没有以正确的方式初始化。确保您将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
  ])
}