6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)

                    export function getProduct (id) {
 return axios.get(`${API_URL}/products/${id}`)
}


export function postProduct (data) {
 return axios.post(`${API_URL}/products`, data)
}


export function patchProduct (data) {
 return axios.patch(`${API_URL}/products`, data)
}
                

                    import { getProduct } from '@/api/products'
import { IProduct } from '@/interfaces'
const actions = {
 async fetchProduct ({ commit }, id: string): Promise<IProduct> {
   try {
     commit('setIsLoading', true)
     const response = await getProduct(id)
     commit('setProduct', response.data)
     return response.data
   } catch (err) {
     // отлавливаем ошибки
   } finally {
     commit('setIsLoading', false)
   }
 }
}
                

                    methods: {
   getProductById (id) {
     return axios.get(`https://example.com/api/products/${id}`)
   }
}
                

                    const API_URL = process.env.VUE_APP_API_URL
                

                    const defaultState = () => {
 return {
   exampleData: {
     prop1: '1',
     prop2: '2'
   }
 }
}


const getters = {
  exampleGetter: (state) => state.exampleData.prop1
}


const mutations = {
 setExampleData (state, data) {
   state.exampleData = data
 }
}


const actions = {
 async fetchData ({ commit }) {
   try {
     const response = await getData()
     commit('setExampleData', response.data)
   } catch (err) {
     console.error(err)
   }
 },


}


export default {
 namespaced: true,
 state: defaultState,
 getters,
 actions,
 mutations
}
                

                    import example from '@/store/example'
…
…

export default {
 state: defaultState,
 getters,
 actions,
 mutations,
 modules: { example }
}
                

                    computed: {
   ...mapGetters('example', ['exampleGetter'])
}