Как динамически менять url адрес api?

Question

[Artem Nanavov]

Всем привет, у меня есть Vuex и в нем я работаю с api, дело в том что мне надо работать с двумя api, они практически одинаковые и чтоб не создавать еще 1 файл я хочу работать в 1

1)/api/photos?new=true&page=${ list }&limit=15
2)/api/photos?popular=true&page=${ list }&limit=15

и я хочу чтоб при переходе на стр new оно подставлялось в api,

примерно так, /api/photos?${ new / popular }=true&page=${ list }&limit=15 код vuex

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

место смены стр ( я хочу чтоб при нажатии на router-link он кидал значение которое вставлялось бы в url и по этому 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

[0xD34F]

Импортируете роутер в своём store.js:

import router from './router.js';

При создании url смотрите текущий маршрут:

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

Comments

[Artem Nanavov]

Спасибо большое