vuex模块疑惑

Question

官方的购物车例子,还有别人仿的bilibili项目都有类似下面这种:

state: {

  status: ''

},

getter: {

  status: state => state.status

},

actions: {

  checkout ({commit, state}, products) {

    commit(types.CHECKOUT_REQUEST)

  }

},

mutations: {

  [types.CHECKOUT_REQUEST] (state) {

    ...

  }

}

1.为什么mutations里要用数组的命名方式?

2.为什么还要把state里的内容再在getter里走一遍?

Answer 1

关于 mutations 里方法的 Computed Property Names 命名，这里的 types.CHECKOUT_REQUEST 相当于 C 语言中的常量，主要作用是防止拼写错误，如果不采用 [types.CHECKOUT_REQUEST] 这种方式，当有拼写错误时代码检查工具也检查不出来，是一种值得借鉴的代码风格。