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

tannde
  • 2
新手上路,请多包涵

在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)
        })
}
回复
阅读 322
4 个回答

没有区别

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

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

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

估计也就这样的区别了

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

从表现层来说:
vuexmutations只是单纯赋值(很浅的一层);mutations同步修改state。UI触发使用commit指令

vuexaction有较为复杂的异步ajax请求;action内可以commit不同statedispatch异步另外一个action。UI触发使用dispatch指令

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

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

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

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

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

mutation 必须同步执行,Action 就不受约束!我们可以在 action 内部执行异步**操作
你知道吗?

宣传栏