Akzeptieren von Params und Filterung in Getter mit VueX

Ich habe mein Gehirn auf diesem ein. Ich versuche, einen Getter zu verwenden, um ein Objekt (Blog-Post) durch seinen "Slug" abzurufen. Unabhängig von der Implementierung dieses GETTERs gibt mein state.posts.filter immer wieder "state.posts.filter" zurück. Ich bin zuversichtlich, dass der Status Elemente im Array hat und standardmäßig als Array definiert ist. Also irgendeine Idee, warum es sich so verhalten würde? Berücksichtige auf Grundlage meines Snippets, dass FETCH_POSTS bereits versendet wurde und dass Beiträge Elemente enthalten.Akzeptieren von Params und Filterung in Getter mit VueX

Ich weiß nicht, ob dies beeinflussen würde, aber ich verwende dies auch in Nuxt im modularen Speicherformat.

My Store:

import {createClient} from '~/plugins/contentful.js' 
const client = createClient() 

const state = { 
    posts: [] 
} 

// getters 
const getters = { 
    allPosts: state => state.posts, 
    getPostBySlug: state => slug => state.posts.filter(post => post.fields.slug === slug) 
} 

// actions 
const actions = { 
    FETCH_POSTS: (state) => { 
    // INIT LOADING 
    client.getEntries({ 
    'content_type': 'article', 
    order: '-sys.createdAt' 
    }) 
    .then(posts => { 
    // SUCCESS 
    state.commit('SET_POSTS', posts.items) 
    }) 
    .catch(error => { 
    // FAILURE 
    console.log(error) 
    }) 
} 
} 

// mutations 
const mutations = { 
    SET_POSTS: (state, posts) => { 
     // Assign posts to state 
     posts = posts.map(function (post) { post.fields.slug = post.fields.title.replace(/\s+/g, '-').toLowerCase() 
     return post 
    }) 
    state.posts = Object.assign({}, posts) 
    } 
} 

export default { 
state, 
getters, 
actions, 
mutations 
}

Und ich bin es in meiner Komponente wie folgt aufrufen:

export default { 
    name: 'blog-post', 
    computed: { 
     post: function() { 
     return this.$store.getters.getPostBySlug('test-slug') 
     } 
    } 
}

Quelle

2017-12-19 radiantstatic

'state.posts = Object.assign ({}, Beiträge)' dieser Code ist nicht richtig. Sie setzen Beiträge, die einem neuen Objekt entsprechen. Objekte haben definitiv keine 'Filter'-Methode. Vielleicht, 'state.posts = posts.slice (0)'? – Bert

zusätzlich zu @Bert, 'state.posts = [... Beiträge]' würde den Job auch tun –

@Bert & Evaldo - Sie zwei sind absolut richtig. Ich bin mir nicht sicher, warum ich es ursprünglich so umgesetzt habe, aber meine Augen haben es völlig übersehen. Schätze die Hilfe! – radiantstatic

@Bert & @Evaldo die richtige Antwort zur Verfügung gestellt. Meine ursprüngliche Aufgabe beim Senden meiner "SET_POST" -Mutation bestand darin, die Ergebnisse einem leeren Objekt und nicht dem entsprechenden Array zuzuweisen. Die korrekte Implementierung wäre die folgende.

// mutations 
const mutations = { 
    SET_POSTS: (state, posts) => { 
     // Assign posts to state 
     posts = posts.map(function (post) { post.fields.slug = post.fields.title.replace(/\s+/g, '-').toLowerCase() 
     return post 
     }) 
     state.posts = Object.assign({}, posts) 
    } 
}

Quelle

2017-12-19 18:13:15 radiantstatic

Akzeptieren von Params und Filterung in Getter mit VueX

Antwort

Verwandte Themen