vuex 什么时候使用 action,什么时候使用 state(用 update 的方式还是 get 的方式)?

SYLiu
  • 544

model:

两种方式:
1.

{
    state: {
        data: { }
    },
    mutations: {
        update(state, data) {
            state.data = data;
        }
    },
    actions: {
        async updateData({ commit }) {
            // ...异步请求略
            commit('update', data);
        }
    }      
}

需要调用 updateData并通过 data 获取数据。
2.

{
   actions: {
        async getDate({ commit }) {
            // ...异步请求略
            return data;
        }
    }      
}

直接调用 getData 拿到数据。

直观来看,方式 2 更简单,但是好像 Vue 的设计思想更偏向于方式 1 ?

求大神解答,如何选择。


好多人没有理解我的问题,我再补充下:

以上两种方式在组件中对应两种调用方式:

this.updateData().then(() => {
    this.data;
})

2.

this.getData().then(data => {
    data;
})

方式 1 要在 vuex 中存一份 state,而很多情况下,我都要先调用 updateData 确保 statedata 是最新的。
方式 2 无需 state,直接通过 action getData 即获取到 data,这样做看起来会简单一些,会不会有什么不合理的。

回复
阅读 4.5k
7 个回答

两种方法达到的效果是不一样的。

第二种做法,通过异步调用的数据,没有存储到store中,就意味着无法在其他组件中共享数据。
如果确实不需要共享数据,updateData就是个无状态变化的函数,没必要放到store里面;如果想功能复用,放到一个js文件中,其他组件import后使用。

如果包含异步操作用 action,同步改变 state 的时候使用 mutation

action能够处理异步操作,action的产生可以认为是mutations不能够异步操作;
获取数据,一般都是直接从state中获取,如果对数据进行计算处理,从getters中获取数据。

没怎么用过vue,不过这个看你是想在getDate.then里面得到数据还是从vuex上得到数据,即便你在then里面拿数据,还是要更新vuex的state,所以,还是commit('update', data);更好

首先回想一下vuex的作用,是用来作为状态管理器的。
state中定义的就是初始状态,vuex可以通过Vue.$store.state.xxx直接获取到某个状态,
mutation是vuex中,修改state的唯一方法——action并不能改变state,而是用于commit state的预处理,同时支持异步处理。
这不意味着mutation不支持异步,毕竟代码回调后终会作用到state中。只是如果你在mutation中使用异步,那devtools的状态变化追踪会有问题,因此mutation只是state的set,而action由开发者自主构建即可,最终调用set即可。
你可以在组件methods中执行异步代码后commit,也可以将这部分代码写到action中复用。

state用来直接获取数据
action用来修改数据,并且可以包含异步操作,比如action中先请求网络接口再修改state

首先回想一下vuex的作用,是用来作为状态管理器的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏