Как передать значение переменной из state в переменную компоненты Vue?

Question

[TuMko]

Здравствуйте. Есть компонента Users:

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

И есть модуль store:

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

Переменная showMore(копка показать еще) из state меняет свое значение исходя из того, существует ли ссылка на следующую страницу (переменная state.nextUrl).
Как можно передать значение переменной state.showMore в переменную компоненты showMoreBtn? В моём варианте прилетает undefined вместо true/false. В самом же state переменная showMore свое значение меняет правильно.

Answer 1

[Alex]

showMoreBtn в компоненте должна быть вычисляемым свойством. Что-то в духе

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

Или используйте mapState

Comments

[TuMko]

Спасибо!