VueXでゲッターでパラメータを受け入れてフィルタリングする

Question

私はこの問題に頭を悩ませました。私はゲッターを使ってオブジェクト（ブログ投稿）を "スラッグ"で検索しようとしています。しかし、このゲッターの実装に関係なく、私のstate.posts.filterは "state.posts.filter"が関数ではありません。私は状態が配列内にアイテムを持っていることを確信しており、デフォルトでは配列として定義されています。それで、なぜこのように行動するのか？スニペットに基づいて、FETCH_POSTSがすでにディスパッチされていて、そのポストに要素が含まれていると仮定します。

これが影響を与えるかどうかはわかりませんが、Nuxtのモジュラーストア形式でもこれを使用しています。

マイストア：

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 
} 

そして、私はこのように私のコンポーネントでそれを呼んでいる：

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

Answer 1

@Bert & @Evaldoは、正しい答えを提供します。私の "SET_POST"突然変異をディスパッチするときの最初の割り当ては、適切な配列の代わりに空のオブジェクトに結果を代入することでした。正しい実装は次のようになります。

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