vuex常用注意事项

  • getter会缓存结果,不需要缓存,需要把getter变为函数

    1
    2
    3
    4
    5
    getters: {
    getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
    }
    }

    每次调用为

    1
    store.getters.getTodoById(1)

    这样通过函数触发,不会缓存每次结果

  • dispatch和commit区别
    dispatch为异步执行,会返回promise
    commit为同步执行

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    actions: {
    async actionA ({ commit }) {
    commit('gotData', await getData())
    },
    async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
    }
    }

    store.dispatch('actionA').then(() => {
    // ...
    })

    一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。