Question

所以我将正确处理：我正在尝试重新制作使用Angular 1的现有应用程序，而不是使用VueJS 2。不熟悉Angular1，我发现很难决定一些事情：

1。什么是工厂（可能是服务），我应该在哪里放置/写入管理它们？

2。好的，我知道控制器上的角度很大，但是我似乎无法理解我是否要使用Vue，控制器的替代品是什么，以及代码的存放位置。

所以，到目前为止，基本上我基本上已经使用VueX进行状态管理，并且我已经将一些服务移到了那里，但是，例如，我无法确定某个服务@requires'NameOfOtherService'是否做到了意味着它像在NodeJS const中一样导入它const NameOfOtherService = require（'insert / path / here'）; ？

基本上，该应用程序从API和php脚本获取数据，例如：在我的appsettings的angular 1版本（使用AppConfig模块）中，我有一个pathFromScript（script）=> {} //等等。

我的问题是，如何管理一个翻译成Vue的应用程序中发生的一切？

在此先感谢您，我知道这完全是一片黑暗。真正的你，

Answer 1

对于Vue.Js，您的角度控制器就是方法。如果您需要从API获取一些数据，则可以使用一种方法来调用Vuex动作，然后将该值返回该方法或将其添加到您的状态，因此它随处可见。这看起来像下面的示例。

我想您的工厂/服务正在管理API调用。我会将其放置在带有axios的Vuex中以进行API调用。
方法与Angular中的控制器相同。您在特定页面上创建方法。如果需要在多个位置重用方法，则可以使用mixins。 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操作以从服务器获取数据。服务器返回该值时，它将调用一个将响应设置为状态（数据）的突变。在vuex中调用getter的mapGetters从状态返回数据。每当状态更改时，它都会更新。

希望这很有意义

如何将Angular1应用程序重做为VueJs应用程序

1 个答案: