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

Answer 2

1. 那个不叫数组的命名方式，叫属性名表达式，为了方便统一管理。毕竟vuex里要写，用到的组件也要写，既然这样就可以提到一个js里，统一管理。
2. vuex用的不多。可能是为了方便以后扩展(比如以后可能不会用原始数据，需要处理下)？也可能是我们可以把getters里的值映射到组件的computed中，这样通过vuex修改了state中的某一项的值之后，就可以自动更新数据。
   例如

data: {
  key: this.$store.key
},
computed: {
  ...mapGetters([
    'key'
  ])
}
// 我们通过vuex修改了state中的key的值之后，`computed`中的获得的值是会自动变的，因为vuex中的`getter`就是"计算属性"

Answer 3

1、getter类似于computed，也可以不写。
建议在看一下文档：Vuex 文档 getter
2、ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

下面是另一个例子。

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

表达式还可以用于定义方法名。

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi

更多参看ES6 对象的扩展-属性名表达式