vuexの、mutationsが分からない

Question

[Rails+Vue.js]に係るCRUD入門〜Part５: Vuex設定編〜を参考に、vuexの勉強をしているのですが、mutationsがわかりません。
自分の理解では、

• コンポーネント側からコミットすることにより、mutationsの該当メソッドが発火する。発火後、mutationsを経由してstateの値を書き換える
• mutationsは、同期処理を扱う

その点を踏まえて、下記のコードを抜粋させていただきました。
axiosを使っているので、非同期処理、つまりactions:　で処理をすると思うのですが、なぜmutationsを使うのか腑に落ちません。
公式ドキュメントも読んだのですが、いまいち理解できませんでした。
vuex周りが難しく、大変申し訳ないのですが、ご教示いただけると幸いです。

import Vue from 'vue'
import Vuex from 'vuex'
import router from '../router/router.js'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  // [state]がコンポーネントにおける[data]に相当
  state: {
    books: []
  },
  // [mutations]がコンポーネントにおける[methods]に相当
  mutations: {
    fetchBooks(state) {
      state.books = [];
      axios.get('/api/books').then((res) => {
        for(var i = 0; i < res.data.books.length; i++) {
          state.books.push(res.data.books[i]);
        }
      }, (error) => {
        console.log(error);
      });
    }
  },
})

Answer 1

「ツール」で変更を追跡できるようにするためのようです。どういったシチュエーションで変更を追跡したくなるかは、以下の資料を参考にしてください。

• Vuex Action vs Mutations - Stackoverflow

ここで言う「ツール」とは、例えば Vue.js devtools を指しているかと思われます。

• Vue.js devtools - Chrome ウェブストア

「ツール」で追跡するためには、「非同期処理」があると追跡できなくなるそうです。なぜ追跡できなくなるかは、自分もわからないのですが。

• ミューテーションは同期的でなければならない - Vuex

では「非同期処理」がなければ action を使わないで、直接 mutation を呼び出して良いのか？と言う疑問があります。以下の資料によると "個人的には呼び出してもいいと思っているが、プロジェクトとしては呼び出しを禁止することは多い" とのことです。

• mutation はコンポーネントから呼び出していいか？

• Vuex ってなに？