美文网首页
Vuex Getters Mutations Actions A

Vuex Getters Mutations Actions A

作者: 老虎爱吃母鸡 | 来源:发表于2017-08-17 16:56 被阅读0次
    • Getter

    vuex中的getters的作用主要用来计算并且缓存state的衍生数据,在redux中并没有涉及到这部分,而是在react-redux中,在mapStateToProps中,把state映射成组件需要的数据,而且如果需要缓存衍生数据,还需要使用Reselect避免在组件update的时候做不必要的更新,而vuex中的getter可以直接把需要使用的衍生数据缓存起来跨组件多次使用,而且能使用function的形式动态计算

    getters: {
      // ...
      getTodoById: (state, getters) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }
    store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
    
    • Mutations Must Be Synchronous

      主要是因为如果Mutations有异步修改state的行为,那么vuex devtool将无法记录到state的修改,可以想想Redux中的中间件logger是如何实现的,在dispatch action之前和dispatch action之后分别打印出store的state,如果修改state的行为是异步的,那么logger是无法记录到state的修改的,因为在修改发生之前已经记录了

    • Actions

      在vuex中,触发异步操作是通过Action,Action的作用用文档里的话说就是

      Instead of mutating the state, actions commit mutations.

      也就是说Action是用来commit Mutations的,这其实相当于直接把redux-thunk结合到redux中,那么thunk的根本作用是什么呢?其实就是延缓求值,所以Action的作用不止是异步调用Mutations,而且还可以根据条件来调用Mutations

    相关文章

      网友评论

          本文标题:Vuex Getters Mutations Actions A

          本文链接:https://www.haomeiwen.com/subject/jcknrxtx.html