Vue/Nuxt/Vuex - [NUXT:SSR] [ERROR] [vuex] 未知 getter答案

【问题标题】：Vue/Nuxt/Vuex - [NUXT:SSR] [ERROR] [vuex] unknown getterVue/Nuxt/Vuex - [NUXT:SSR] [ERROR] [vuex] 未知 getter
【发布时间】：2019-10-19 23:19:36
【问题描述】：

当我使用 v-for 循环遍历 div 上的“allPosts”数据时出现错误。

Nuxt 文档说“模块：存储目录中的每个 .js 文件都转换为命名空间模块”。也许我在这方面遗漏了什么？

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
}

【问题讨论】：

标签： javascript vue.js nuxt.js vuex-modules

【解决方案1】：

您在设置和访问商店的方式方面存在许多问题。首先，您使用docs 告诉我们的“经典模式”创建您的商店：

此功能已弃用，将在 Nuxt 3 中删除。

因此，为了使用最新的方法，您的 store/index.js 应该如下所示：

//store/index.js



//end

这不是一个错误，你实际上不需要任何东西，只要它存在。无需导入 vue 或 vuex 或任何模块。

你的 store/posts.js 基本上可以保持原样，只需要改变你的 state、mutations、getter 和 action 要导出的常量并删除底部的导出：

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

其次，您似乎错误地使用了 mapGetters。如果你像我上面那样设置你的商店，你可以像这样在 pages/index.vue 中使用它：

//pages.index.vue

<script>
import {mapGetters} from 'vuex'

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

然后，您可以像访问任何计算属性一样访问模板中的“allPosts”，也可以在脚本中使用“this.allPosts”访问它。

【讨论】：

谢谢，这很奏效。我确实能够获取数据'this.$store.state.posts.posts'，但不想那样做。下次我会更仔细地阅读文档。再次感谢您的帮助

【解决方案2】：

我尝试了 Andrew1325 的建议，因为我与 NUXT 和 VUEX 处于类似的位置，但它不起作用，我仍然得到：[vuex] unknown getter: allTodos

【讨论】：