Where to use Vuex?

Question

Vue.js

Received a test task from an employer SPA page displaying a list of news on laravel+vue. There is also a filter by date and author and pagination. The filter and pagination must be stored in the page's routing. And require you to use vuex. I am familiar with vuex only theoretically, I have not applied it in practice. Please tell me where in this task it can be applied and preferably with an example.

Answer 1

vuex - data store!!!!! Everything should be clear already here)))
The essence is simple, in vuex there are actions - these are methods that request data, there are mutations - methods that record the received data, there is state - properties that store the data recorded through mutations.
After, in the component in which you want to display this data, display it there from the storage.
I will say right away, I always try to use it, because. for me, this greatly simplifies the description of the code with data, because all methods for requesting, sending data are in the 1st place, and are not scattered anywhere in the components.

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

I think the point is clear. I have written everything. You just need to look at youtube videos about storage and do what I wrote + do normal pagination