Как переделать приложение Angular1 в приложение VueJs

Question

Так что я получу право на это: я пытаюсь переделать существующее приложение, которое использовало Angular 1, вместо этого используя VueJS 2. Будучи незнакомым с Angular1, я нахожу сложным принять решение о нескольких вещах:

1.Что такое фабрики (вероятно, службы), где я могу разместить / записать управление ими?

2. Хорошо, я знаю, что angular велик на контроллерах, но я не могу понять, должен ли я использовать Vueкакая альтернатива контроллеру и где хранить код.

Итак, в общем, я до сих пор получил использование VueX для управления состоянием, и я переместил туда некоторые службы - однако я могунапример, не выяснить, если определенный сервис @requires 'NameOfOtherService' означает ли это, что он импортирует его, как в NodeJS const NameOfOtherService = require ('insert / path / here');?

В основном приложение получает данные из сценариев API и php, например: в версии angular 1 в моих appsettings, которая использует модуль AppConfig, у меня есть pathFromScript (script) => {} // и т. Д..

Мой вопрос: как мне управлять ВСЕМ, что происходит в одном приложении, например, переведенным на Vue?

Заранее спасибо, я знаю, что здесь все в порядке.С уважением,

Answer 1

Что касается Vue.Js, ваши угловые контроллеры - это методы. Если вам нужно получить некоторые данные из API, вы можете использовать метод для вызова действия Vuex и либо вернуть значение обратно в метод, либо добавить его в ваше состояние, чтобы оно было доступно везде. Это будет похоже на пример ниже.

1. Я полагаю, ваши фабрики / службы управляют вызовами API. Я бы поместил это в Vuex с помощью axios, чтобы совершать вызовы API.

2. Методы такие же, как у контроллеров в Angular. Вы создаете методы на конкретной странице. Если вам нужен метод для повторного использования в нескольких местах, вы можете использовать миксины. Mixins расширяет конкретную страницу, импортируя ее. Вы можете прочитать об этом здесь: https://vuejs.org/v2/guide/mixins.html

page.vue

{{data}}

export default {
   import { mapActions, mapGetters } from 'vuex'
   ...
   computed: {
      ...mapGetters({
         data: 'getData'
      })
   },
   methods: {
      ...mapActions({
         getServerData: 'getDataFromServer'
      })
   },
   created () {
      this.getServerData()
   }
}

store.js (vuex)

import axios from 'axios'
state: {
   data: null
},
getters: {
   getData: state => {
      return state.data
   }
},
mutations: {
   setDataFromServer: (state, payload) => {
       state.data = payload
   }
},
actions: {
   getDataFromServer: ({ commit }) => {
      return axios.get('https://website.com/api/data').then((response) => {
          commit('setDataFromServer', response)
      })
   }
}

В этом примере созданный вызывает действие vuex для получения данных с сервера. Когда сервер возвращает значение, он вызывает мутацию, которая устанавливает ответ в состоянии (данные). MapGetters, который вызывает геттеры в vuex, возвращает данные из состояния. Он обновляется всякий раз, когда изменяется состояние.

Надеюсь, это имеет смысл