Как получить значение данных в обычном файле js из компонента vue?

Question

У меня есть компонент MyComponent. vue, где у меня есть значение данных, которое постоянно меняется. Я хочу передать это значение в javascript файл (js файл должен знать об изменении значения каждый раз)

Почему я это делаю? Потому что мой обычный файл js является служебным слоем для методов ax ios. Я могу импортировать этот файл во многие другие компоненты. Файл содержит методы ax ios, а URL-адреса - динамические c. Я хочу, чтобы эти URL-адреса зависели от переменной данных. Эта переменная данных поступает из MyComponent. js

Итак, основная цель - сделать динамические c URL-адреса ax ios, которые зависят от переменной данных

Я пробовал какой-то код, но он не работает, потому что js файл (CategoryService. js) ничего не знает о this.categoryNumber.

MyComponent. vue:

<script>
export default {
data() {
return {
categoryNumber: 1
   }
  }
}
</script>

Категория обслуживания. js

import http from "../../../http-common";

let category = "category1";

if (this.categoryNumber === 1) {
    category = "category1";
} if (this.categoryNumber === 2) {
    category = "category2";
}

class CategoryService {
    get(id) {
        return http.get(`/${category}/${id}`);
    }

    update(id, data) {
        return http.put(`/${category}/${id}`, data);
    }

    create(data) {
        return http.post(`/${category}`, data);
    }

    delete(id) {
        return http.delete(`/${category}/${id}`);
    }

    getAll() {
        return http.get(`/${category}/all`);
    }
}

export default new CategoryService();

Answer 1

Итак, немного рефакторинга, вы можете легко заставить это работать.

Прежде всего, я бы поместил туда if / else logi c вашего класса.

Для удобства и масштабируемости я бы использовал магазин Vuex, который будет отслеживать ваш categoryNumber и делиться им со всеми вашими компонентами.

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

Что касается последней части, я не знаю logi c в файле http-common, поэтому код, который я вам покажу, немного неприятен. Но в зависимости от того, связали ли вы 'http' с ax ios, вы можете использовать ax ios перехватчики для вызова метода getCategoryNumber() в каждом запросе.

Вот идея реализации, которую я бы использовал go для:

const CategoryService = class CategoryService {

  constructor(store) {
    this._store = store;
    this.category = "category1";
  }

  getCategoryNumber() {
    if (this._store.state.categoryNumber === 1) {
      this.category = "category1";
    }
    if (this._store.state.categoryNumber === 2) {
      this.category = "category2";
    }
    console.log(this.category); // for demo puprose
  }

  get(id) {
    this.getCategoryNumber(); // We could use axios request interceptor instead of calling that in every route, but that works !
    return http.get(`/${this.category}/${id}`);
  }

  update(id, data) {
    this.getCategoryNumber();
    return http.put(`/${this.category}/${id}`, data);
  }

  create(data) {
    this.getCategoryNumber();
    return http.post(`/${this.category}`, data);
  }

  delete(id) {
    this.getCategoryNumber();
    return http.delete(`/${this.category}/${id}`);
  }

  getAll() {
    this.getCategoryNumber();
    return http.get(`/${this.category}/all`);
  }
}

const store = new Vuex.Store({
  state: {
    categoryNumber: 1
  },
  mutations: {
    setCategoryNumber(state, payload) {
      state.categoryNumber = payload;
    }
  }
});

// Bind your service to the Vue prototype so you can easily use it in any component with 'this.$service'
// pass it the store instance as parameter
Vue.prototype.$service = new CategoryService(store);

new Vue({
  el: "#app",
  store, // dont forget to bind your store to your Vue instance
  methods: {
    updateCategoryNumber() {
      // Put here any logic to update the number
      this.categoryNumber = this.categoryNumber === 1 ? 2 : 1;
      this.checkServiceCategoryValue();
    },
    checkServiceCategoryValue() {
      // for demonstration purpose
      this.$service.getCategoryNumber();
    }
  },
  computed: {
    // Look for the store value and update it 
    categoryNumber: {
      get() {
        return this.$store.state.categoryNumber;
      },
      set(value) {
        this.$store.commit("setCategoryNumber", value);
      }
    }
  }
});

<div id="app">
  <h2>number: {{ categoryNumber }}</h2>
  <button type="button" @click="updateCategoryNumber()">
    updateCategoryNumber
  </button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>

Answer 2

Благодаря @Solar я просто добавил еще один параметр для всех URL-адресов и поместил в него номер категории

CategoryService. js:

class CategoryOneService {
    get(id, category) {
        return http.get(`/${category}/${id}`);
      }

      getAll(category) {
        return http.get(`/${category}/all`);
      }

    }

функций. js:

let catNum = "";

function getQuestion() {

    if (this.categoryNumber === 1) {
        catNum = "category1";
    }

    if (this.categoryNumber === 2) {
        catNum = "category2";
    }
    let questionId = this.questionNumber;
    CategoryOneService.get(questionId, catNum)
        .then(response => {
            this.question = response.data.question;
            this.answer = response.data.answer;

        })
        .catch(error => {
            console.log(error);
        });
}