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 }
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.
我尝试了 Andrew1325 的建议,因为我与 NUXT 和 VUEX 处于类似的位置,但它没有用,但我仍然得到:[vuex] unknown getter:allTodos
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.