How to dynamically change api url?

Question

Vue.js

Hello everyone, I have Vuex and I work with api in it, the fact is that I need to work with two api, they are almost the same and in order not to create 1 more file I want to work in 1
1)/api/photos?new= true&page=${ list }&limit=15
2)/api/photos?popular=true&page=${ list }&limit=15
and I want it to be substituted in api when going to page new,
something like this, /api/photos?$ { new / popular }=true&page=${ list }&limit=15 vuex code

export default {
    state: { 
        posts: [],
        perPage: 15,
        page: 1,
        total: 0,
        loading: false,
    },

    getters: {
        numPages: state => Math.ceil( state.total / state.perPage ),
    },

    mutations: {
        updateLoading: ( state, loading ) => state.loading = loading,
        updatePosts: ( state, { posts, total, page } ) => Object.assign( state, { posts, total, page } ),
    },

    actions: {
        async fetchPosts( { commit }, page ) {
            commit('updateLoading', true)

            const list = page

            // const start = ( page - 1 ) * state.perPage;
            // const end = page * state.perPage;
            const new__url = `/api/photos?new=true&page=${ list }&limit=15`

            try {
                const response = await fetch( new__url )
                const posts = await response.json()

                const total = posts.totalItems
                commit( 'updatePosts', { posts, total, list }) 
            } catch (e) {
                console.error(e)
            }

            commit( 'updateLoading', false )
        },
    }
}

the place to change the page (I want that when clicking on the router-link, it throws a value that would be inserted into the url and data was already taken from this url)

<template>
  <div class="home">
    <div class="body">
      <appheader class="header"/>

      <div class="wrapper">

        <ol class="tabs__list">
          <router-link to="/photo" >
            <ul class="link tabs__link" :class="{ active: activeLink === 1 }" > 
                <p id='item1' @click="activeLink = 1" > New </p>
            </ul>
          </router-link>

          <router-link to="/popular">
            <ul class="link tabs__link" :class="{ active: activeLink === 2 }" > 
              <p id='item1' @click="activeLink = 2" > Popular </p>
            </ul>
          </router-link>

        </ol>

      </div>
    </div>

    <router-view/>
  </div>
</template>

<script>
  import appheader from '../components/components/Header'

  export default {

    components: { appheader, },

    data () {
      return {
        activeLink: undefined,
        loading: false,
      }
    },
    methods: {
      simulateProgress() {
        this.loading = true

        setTimeout(() => {
          this.loading = false
        }, 3000)
      },

    }
  }
</script>

Answer 1

Import the router in your store.js: When creating the url, look at the current route:

const url = `/api/photos?${в зависимости от router.currentRoute}=true&page=${list}&limit=15`;