Vue/Nuxt/Vuex – [NUXT:SSR] [ERROR] [vuex] unknown getter

The error appears when I use a v-for loop to go through the ‘allPosts’ data on my div.

The Nuxt documentation says ‘Modules: every .js file inside the store directory is transformed as a namespaced module’. Maybe I’m missing something in this regard?

pages/index.vue

<template>
  <section id="postgrid">
    <div v-for="post in allPosts" :key="post.id"></div>
  </section>
</template>

<script>
import {mapGetters} from 'vuex'

import PostTile from '@/components/Blog/PostTile'

export default {
  components: {
    PostTile
  },
  computed: mapGetters(['allPosts'])
}
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import Posts from './posts'

const store = new Vuex.Store({
  modules: {
    Posts
  }
})

store/posts.js

const state = () => ({
  posts: [
    {
      id: 0,
      title: 'A new beginning',
      previewText: 'This will be awesome don't miss it',
      category: 'Food',
      featured_image: 'http://getwallpapers.com/wallpaper/full/6/9/8/668959.jpg',
      slug: 'a-new-beginning',
      post_body: '<p>Post body here</p>',
      next_post_slug: 'a-second-beginning'
    },
    {
      id: 1,
      title: 'A second beginning',
      previewText: 'This will be awesome don't miss it',
      category: 'Venues',
      featured_image: 'https://images.wallpaperscraft.com/image/beautiful_scenery_mountains_lake_nature_93318_1920x1080.jpg',
      slug: 'a-second-beginning',
      post_body: '<p>Post body here</p>',
      prev_post_slug: 'a-new-beginning',
      next_post_slug: 'a-third-beginning'
    },
    {
      id: 2,
      title: 'A third beginning',
      previewText: 'This will be awesome don't miss it',
      category: 'Experiences',
      featured_image: 'http://eskipaper.com/images/beautiful-reflective-wallpaper-1.jpg',
      slug: 'a-third-beginning',
      post_body: '<p>Post body here</p>',
      prev_post_slug: 'a-second-beginning',
      next_post_slug: 'a-forth-beginning'
    }
  ]
})

const getters = {
  allPosts: (state) => state.posts
}

export default {
  state,
  getters
}

Answer

You have a number of issues in how you are setting up and accessing your store. Firstly you are creating your store using the “classic mode” which the docs tell us:

This feature is deprecated and will be removed in Nuxt 3.

So in order to be using the latest methods your store/index.js should look like this:

//store/index.js



//end

This is not a mistake, you don’t actually need anything in it, just have it exist. There is no need to import vue or vuex or any modules.

Your store/posts.js can largely stay as it is, just change your state, mutations, getters, and actions to be exported constants and delete the bottom export:

//store/posts.js
export const state = () => ({
  posts: [
    ...
  ]
})
export const mutations = {

}
export const actions = { 

}
export const getters = {
  allPosts: state => state.posts
}


//delete the following
export default {
  state,
  getters
}

Secondly you seem to be using mapGetters incorrectly. If you set up your store like I have above, you can use it in pages/index.vue like so:

//pages.index.vue

<script>
import {mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters ({
      allposts: 'posts/allPosts'
    })
  }
}
</script>

Then you can access “allPosts” in your template as you would any computed property or access it with “this.allPosts” in your script.