Vue/Nuxt/Vuex - [NUXT:SSR] [錯誤] [vuex] 未知吸氣劑

Question

當我通過 div 上的“allPosts”數據使用 v-for 循環到 go 時出現錯誤。

Nuxt 文檔說“模塊：存儲目錄中的每個 .js 文件都轉換為命名空間模塊”。 也許我在這方面遺漏了什么？

頁面/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>

商店/index.js

 import Vue from 'vue' import Vuex from 'vuex' import Posts from './posts' const store = new Vuex.Store({ modules: { Posts } })

商店/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 1

您在如何設置和訪問商店方面存在許多問題。 首先，您正在使用文檔告訴我們的“經典模式”創建您的商店：

此功能已棄用，將在 Nuxt 3 中刪除。

所以為了使用最新的方法，你的 store/index.js 應該是這樣的：

//store/index.js



//end

這不是錯誤，您實際上不需要其中的任何內容，只需讓它存在即可。 無需導入 vue 或 vuex 或任何模塊。

你的 store/posts.js 基本上可以保持原樣，只需改變你的狀態、突變、getter 和操作以導出常量並刪除底部導出：

//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”訪問它。

Answer 2

我嘗試了 Andrew1325 的建議，因為我與 NUXT 和 VUEX 處於類似的位置，但它沒有用，但我仍然得到：[vuex] unknown getter：allTodos