Fetching content with store.getter

[jhull]

I may be trying to do something impossible, but with the new fetch() function, I can't seem to do this:

    computed: {
      ...mapGetters({
        stubby: "parent/getBar"
      }),

    async fetch() {
      this.foo = await this.$content('foo').
        where({ 'bar': this.stubby }).fetch()
    }

What is the best way to fetch content with content with variables from the store?

[lucpotage]

Hello @jhull, is 'foo' key a directory or a file? The method .where() only works when fetching a directory.

[jhull]

Yes, foo is a directory. Should I be able to fetch with where() with variables from the store? Every time I try to do it, the store item is undefined. Yet, when I open up Vue dev tools the variable is there in the store.

[lucpotage]

Nuxt 2.13.3 + Nuxt Content 1.4.0

I spent some time testing it locally and it works great: https://github.com/lucpotage/nuxt-content-issue-233

store/index.js

export const state = () => ({
  color: 'red'
})

export const getters = {
  color: (state) => {
    return state.color
  }
}

pages/index/vue

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      articles: []
    }
  },
  computed: {
    ...mapGetters(['color'])
  },
  async fetch() {
    console.log(this.color)
    this.articles = await this.$content('articles').where({ color: this.color }).fetch()
  }
}
</script>

content/articles/1.yaml

---
color: red
name: hello

content/articles/2.yaml

---
color: yellow
name: world

My articles array is correctly filtered in the dev tools. If it does not work on your side, I strongly invite you to provide a reproduction link. 🙂