How to pass variable value from state to Vue component variable?

Question

Vue.js

Hello. There is a Users component:

export default {
  name: 'Users',
  data: () => ({
    showMoreBtn: false
  }),
  async mounted () {
    this.showMoreBtn = this.$store.state.showMore
    console.log(this.$store.state.showMore)
  }
}

And there is a store module:

export default {
  state: {
    userList: [],
    nextUrl: null,
    showMore: false
  },
  mutations: {
    createUserList (state, users) {
      state.nextUrl = users.links.next_url
      if (state.nextUrl !== null) {
        state.showMore = true
      } else {
        state.showMore = false
      }
      console.log(state.showMore)
    }
  },
  actions: {
    async fetchUsers ({ commit }) {
      const userList = await fetch('httsp://some-url').then(response => response.json())

      commit('createUserList', userList)
    }
  },
  getters: {
    getUserList: state => {
      return state.userList
    }
  }
}

The showMore (show more button) variable from state changes its value based on whether there is a link to the next page (state.nextUrl variable).
How can I pass the value of the state.showMore variable to the showMoreBtn component variable? In my version, undefined arrives instead of true/false. In the state itself, the showMore variable changes its value correctly.

Answer 1

showMoreBtn must be a computed property on the component. Something in the spirit

showMoreBtn() {
  return this.$store.state.showMore
}

Or use mapState