gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 00:57:21 25 4
gpt4 key购买 nike

当我使用 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
}

最佳答案

您在如何设置和访问商店方面遇到了许多问题。首先,您使用“经典模式”创建商店,docs告诉我们:

This feature is deprecated and will be removed in 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”访问它。

关于javascript - Vue/Nuxt/Vuex - [NUXT :SSR] [ERROR] [vuex] unknown getter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56443680/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com