@ObehanProger

В каком месте использовать Vuex?

Получил тестовое задание от работодателя SPA-страница отображения списка новостей на laravel+vue. Там же фильтр по дате и автору и пагинация. Фильтр и пагинацию нужно сохранять в роутинге страницы. И требуют использовать vuex. Я знаком с vuex только теоретически, на практике не применял. Подскажите, пожалуйста, где в данном задании его можно применить и желательно с примерчиком.
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
vuex - хранилище данных!!!!! Уже тут всё понятно должно быть)))
Суть проста, в vuex есть actions - это методы, которые запрашивают данные, есть mutations - методы, которые записывают полученные данные, есть store - свойства, которые хранят записанные через mutations данные.

После, в компоненте, в котором вы хотите отобразить эти данные, выводите их туда из хранилища.
Скажу сразу, я всегда стараюсь его юзать, т.к. по мне это очень упрощает описание кода с данными, т.к. все методы для запроса, отправки данных находятся в 1м месте, а не разбросаны где попало в компонентах.

// store/news.js
export const state = () => ({
  news: null,
});

export const actions = {
  // Запросить новости с бекенда
  async getNews ({ commit }, { page, author, date }) {
    try {
      const data = await axios.get('/api/news', {
        params: {
          page, // Номер страницы
          author, // Автор
          date // Дата
        }
      })

      // Полученный json с данными положить в хранилище используя мутацию
      commit('setNews', data)
    } catch (error) {
      console.error('Твою мать!!!', error)
    }
  }
};

export const mutations = {
  // Положить данные в state
  setNews: (state, news) => { state.news = news }
};


<!-- pages/news.vue -->
<template>
<div>
  <ul v-if="news">
    <li v-for="newsItem in news">{{ newsItem.title }}</li>
  </ul>
  
  <!-- Пагинация -->
  <button @click="onGetNews({ page: 1 })">1</button>
  <button @click="onGetNews({ page: 2 })">2</button>
  <button @click="onGetNews({ page: 3 })">3</button>
  <button @click="onGetNews({ page: 4 })">4</button>
  
  <!-- По автору-->
  <button @click="onGetNews({ author: 'Бил Гейтс' })">Бил Гейтс</button>

  <!-- По дате-->
  <button @click="onGetNews({ date: '06.08.2019' })">06.08.2019</button>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  // При создании компонента запросить данные
  async created () {
    await this.getNews({
     page: this.$route.query.page,
     date: this.$route.query.date,
     author: this.$route.query.author
    })
  },
  computed: {
    // "импортировать" из хранилища новостей данные в компонент
    ...mapState('news', [ // Имя модуля хранилища
      'news' // Свойство news из state в хранилище
    ])
  },
  methods: {
    // "импортировать" метод запроса новостей из хранилища
    ...mapActions('news', [ // Имя модуля хранилища
      'getNews' // Метод getNews в разделе actions
    ]),

    async onGetNews ({ page, author, date }) {
      await this.getNews({ page, author, date  })
      
      // Добавим в адрес гет параметр фильтра
      this.$router.push({ 
        path: 'news', 
        query: { 
          page, 
          author, 
          date
        }
      })
    }
  }
}
</script>


Думаю суть ясна. Я и так всё написал. Вам лишь нужно поглядеть на youtube ролики про хранилище и сделать то, что я написал + сделать нормальную пагинацию
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы