How to correctly call methods for API requests?

Question

Vue.js

There is 1 option

methods: {
  ...mapActions('module name', ['getData'])
},
mounted() {
  this.getData();
},

actions: {
  async getData({ commit }) {
    try {
      const response = await axios.get(url);
      commit('mutation name', response.data);
    } catch (e) {
      console.error(e);
    }
  },
},

and 2 second option, if I get the result of the request in the component itself

methods: {
  ...mapActions('module name', ['getData'])
},
mounted() {
  this.getData().then((res) => {
    if(res.status !== 200) {
      console.log('Error')
    }
  });
},

actions: {
  async getData({ commit }) {
    try {
      const response = await axios.get(url);
      commit('mutation name', response.data);
      return response;
    } catch (e) {
      console.error(e);
      return null;
    }
  },
},

Is it correct to write like that?
And the second question, I often see when instead of try / catch they use

axios.get(url)
  .then()
  .catch(e)
  .finally()

async getData({ commit }) {
    return await axios.get(url).then((res) => {
      commit('mutation name', res.data)
    }).catch(e => console.error(e));
    }
  },

Which option is preferable?

Answer 1

1. Don't want to read the doc? How do you refer from mounted to a function from the store?
https://vuex.vuejs.org/guide/actions.html#dispatch...
2. No difference