Когда использовать mutations, а когда actions?

Question

[wakenby]

Правильно ли я понимаю, что mutations только для изменения state, и никакой логики не должно быть. А в actions вся логика которая может быть, в том числе и обращения к backend.

Или в mutations может быть логика, которая не относиться к запросам на сервер, а actions нужно использовать только тогда, когда идет запрос на backend?

Answer 1

[Валерий Воронков]

Вообще, подразумевается так: если у вас есть какие-либо асинхроннеы запросы, то должна быть связка - экшен - мутация. Если же у вас просто происходит обновление стэйта - то используйте мутацию. Есть также небольшое замечание: даже если у вас нет асинхронных операций, но необходимо выполнить 2 и более мутаций - лучше это выполнять в экшене.

Comments

[wakenby]

Спасибо! Тогда будет правильнее так:

mutations: {
  addTodo (state, title) {
    const newTodo = {
      title: title,
      id: Date.now(),
      completed: false
    }

    state.todos.unshift(newTodo)
  }
},
actions: {
}

А так уже не правильно:

mutations: {
  addTodo (state, todo) {
    state.todos.unshift(todo)
  }
},
actions: {
  addTodo (ctx, title) {
    const newTodo = {
      title: title,
      id: Date.now(),
      completed: false
    }
    
    ctx.commit('addTodo', newTodo)
  }
}

(Пример грубый, но ничего другого в голову не пришло)

[Валерий Воронков]

wakenby, правильные по определению оба варианта, все завиит от конкретной ситуации. Кстати, попробуйте копать в сторону модульности - так ,во-первых, удобнее, а во-вторых проще сразу находить нужные геттеры, мутации, экшены. Обычно делают такую структуры:

Если нужны какие пояснения -пишите, не стесняйтесь.

[wakenby]

Валерий Воронков, Спасибо!

[wakenby]

Валерий Воронков, Я разделяю пока что так:

А можете рассказать подробнее как у вас на скрине? Каждая функция action находиться в своем js файле? И в actions, getters, metations папках находятся множество функций, которые собираются в index.js, а уже эти index.js собираются в главном store.js?

[Валерий Воронков]

И каждый файл Вы делите ещё на отдельнона геттеры, мутации, экшены, стэйт и импорты остаются в индексе.
причем внутри теттеры, мутации и экшены так же разделены отдельно, в результате в корне каждой папки находится свой индекс, в который экспортируются все функции. Немного запутано, в первый раз, но потом привыкаете и очень удобно.

[wakenby]

Валерий Воронков, Кажется понял, а можете показать скриншоты открытой папки: actions, getters, metations?

[Валерий Воронков]