Property not defined on instance while using Vuex in Nuxt

user_7028507 0
Viewed 26

I believe I have the vuex store set up correctly (see below) but I cannot seem to return my results, can anyone tell me what I am doing wrong.

I have the following:

/store/index.js

import Vuex from 'vuex';
import vehiclesModule from './modules/vehicles/index.js';

const createStore = () => {
  return new Vuex.Store({
    namespaced: true,
    modules: {
      vehicles: vehiclesModule
  }
  })
}

export default createStore

./modules/vehicles/index.js

import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'

export default {
  namespaced: true,
  state() {
    return {
      vehicles: [
        {
          id: '1',
          registration: 'A123 BCD',
          owner: 'Paul',
        }
      ]
    };
  },
  mutations,
  actions,
  getters
}

./modules/vehicles/getters.js

export default {
  vehicles(state) {
    return state.vehicles;
  }
}

I believe from what I have read the above is correct so how do I pass the state into a list in my component?
I assumed the following but it's not working.

<template>
  <div>
    <h1>test</h1>
    <ul>
      <li v-for="vehicle in vehicles" :key="vehicle.id">{{ vehicle.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Vehicles',
  data() {
    return {
      vehicles: [],
    }
  },
  created() {
    this.$store.dispatch[('vehicles/vehicles', this.vehicles)]
  },
}
</script>

I also tried

computed: { 
  filteredVehicles() {
    return this.$store.dispatch['vehicles/vehicles']
  }
}

but I get the warning

Property or method "vehicles" is not defined on the instance but referenced during render.

nuxt.js vuex
1 Answers

I don't really know what your actions are doing, supposing that they are like this

export default {
  namespaced: true,
  state() {
    return {
      vehicles: [
        {
          id: '1',
          registration: 'A123 BCD',
          owner: 'Paul',
        },
      ],
    }
  },
  actions: {
    vehicles() {
      console.log('vehicles')
    },
  },
}

You can call them like that in your page

<template>
  <div>
    <h1>test</h1>
    <ul>
      <li v-for="vehicle in vehicles" :key="vehicle.id">{{ vehicle.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Vehicles',
  data() {
    return {
      vehicles: [],
    }
  },
  async created() {
    await this.$store.dispatch('vehicles/vehicles', this.vehicles)
  },
}
</script>

I don't see the use for vehicles in data() tho (why not use this.$store.state.vehicles ?), and the name of the action should be something else too because everything is named vehicle so far.

user_88165850
Related