关于在vue.$store中不同场景下使用actions和mutations的区别？

Question

在vue.$store中actions用于异步，一直不是很了解，看到别人的代码都是在actions中进行异步操作。

假如下面代码是在登录页面点击登录后，将获取的登录信息存到vuex中：

const store = {
    state: {
        loginInfo: () => null,
    },
    mutations: {
        initLoginInfo(state, data) {
            state.loginInfo = data
        },
    },
    actions: {
        getLoginInfo({commit}) {
            api.login()
                .then(res => {
                    commit('initLoginInfo', res)
                })
        },
    },
}

和我在Login.vue中直接调用api.login()，然后直接使用mutations，有什么区别吗？如下代码：

handleLogin() {
    // 使用actions将结果存入loginInfo
    // this.$store.dispatch('getLoginInfo')
    api.login()
        .then(res => {
            // 使用mutations将结果存入loginInfo
            this.$store.commit('initLoginInfo', res)
        })
}

Answer 1

没有区别

用actions可以方便统一管理吧。更加利于复用。

如果使用actions 那么只需要在调用请求的时候，调用一个actions

但是如果用你的 是不是还要import api 然后在调用 mutations

估计也就这样的区别了

Answer 2

其实针对你贴的代码，当然最后效果一样。

从表现层来说：
vuex中mutations只是单纯赋值（很浅的一层）；mutations同步修改state。UI触发使用commit指令。

vuex中action有较为复杂的异步ajax请求；action内可以commit不同state或dispatch异步另外一个action。UI触发使用dispatch指令。

vuex触发方式有两种commit同步和dispatch异步。

vuex的流向：
view -> commit -> mutations -> state变化 -> view变化(同步操作)

view -> dispatch -> actions -> mutations -> state变化 -> view变化(异步操作)

Answer 3

actions便于复用和统一管理异步请求操作

Answer 4

文档里面有段话应该可以解释：

mutation 必须同步执行，Action 就不受约束！我们可以在 action 内部执行异步**操作