Syntax error in vuex store module arrow function

Question

I know that arrow functions should not be used in Vue instance. But in actions they are used even in vuex docs.

Trying to use this example from medium, but have got a Syntax Error.

Module build failed: SyntaxError: Unexpected token, expected

  49 |     return ApiService
  50 |       .get('project_list')
> 51 |       .then(({data})) => {
     |                       ^
  52 |         context.commit(SET_PROJECTS, data.projects.results);
  53 |         context.commit(FETCH_END)
  54 |       }

Code in src/store/projects.module. Only the variables names were changed here. So I little bit confused about this Syntax Error.

const actions = {
  [FETCH_PROJECTS] (context, payload) {
    context.commit(FETCH_START)
    return ApiService
      .get('project_list')
      .then(({data})) => {
        context.commit(SET_PROJECTS, data.projects.results);
        context.commit(FETCH_END)
      }
      .catch(({response})) => {
        context.commit(SET_ERROR, response.data.errors)
      }
  },
  [FETCH_A_PROJECT] (context, payload) {
    context.commit(FETCH_START)
    const {project_id} = payload
    return ApiService
      .get(`project_list/${project_id}`)
      .then(({data})) => {
        context.commit(SET_A_PROJECT, data.projects);
        context.commit(FETCH_END)
      })
      .catch(({response})) => {
        context.commit(SET_ERROR, response.data.errors)
      })
  }
}

Answer 1

You prematurely closed the then method. Get rid of one of the closing parenthesis like so:

.then(({data}) => {
    context.commit(SET_PROJECTS, data.projects.results);
    context.commit(FETCH_END)
})