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

1. 那个不叫数组的命名方式，叫属性名表达式，为了方便统一管理。毕竟vuex里要写，用到的组件也要写，既然这样就可以提到一个js里，统一管理。

2. 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] 这种方式，当有拼写错误时代码检查工具也检查不出来，是一种值得借鉴的代码风格。