Myujth

So I'll get right to it :
I'm trying to remake an existing app that used Angular 1 , instead using VueJS 2.
Being unfamiliar to Angular1 I find it challenging to decide on a few things :

1.What are factories(probably services), where do I place/write manage them?

2.Okay I know angular is big on controllers, but I cannot seem to understand if I were to use Vue , what's the alternative to the controller, and where to hold the code.

So, basically what I've gotten so far is to use VueX for state management and I have moved some services there, however - I can't figure out for example if a certain service @requires 'NameOfOtherService' , does it mean it imports it like in NodeJS const NameOfOtherService = require ('insert/path/here'); ?

Basically the app gets data from an API and php scripts, for example :
In the angular 1 version in my appsettings, which is using an AppConfig module I have a pathFromScript(script) => // etc.

My question is , how do I manage EVERYTHING that's going on within one app like that translated to Vue?

Thank you in advance I know it's entirely a shot in the dark here.
Yours truly ,

As for Vue.Js, your angular controllers are methods. If you need to get some data from an API, you can use a method to call a Vuex action and either return the value back to the method or add it to your state, so it's available everywhere. This will look like the example below.

1. I guess your factories / services are managing API calls. I would place that inside Vuex with axios to make API calls.




2. Methods is the same as controllers in Angular. You create methods on the specific page. If you need a method to be resused multiple places, you can use mixins. Mixins extends the specific page by importing it. You can read about it here: 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)
 )
 

In this example the created is calling the vuex action to get the data from the server. When the server returns the value, it calls a mutation which sets the response in a state (data). The mapGetters which calls the getters in vuex, returns the data from state. It updates whenever the state changes.

Hope this makes sense