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

那个不叫数组的命名方式，叫属性名表达式，为了方便统一管理。毕竟vuex里要写，用到的组件也要写，既然这样就可以提到一个js里，统一管理。vuex用的不多。可能是为了方便以后扩展(比如以后可能不会用原始数据，需要处理下)？也可能是我们可以把getters里的值映射到组件的computed中，这样通过vuex修改了state中的某一项的值之后，就可以自动更新数据。例如data: {   key: this.$store.key }, computed: {   ...mapGetters([     'key'   ]) } // 我们通过vuex修改了state中的key的值之后，`computed`中的获得的值是会自动变的，因为vuex中的`getter`就是"计算属性"

Answer 2

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