H5W3
当前位置:H5W3 > 其他技术问题 > 正文

使用vuex的时候,在store文件夹下面新建一个mutation-types.js文件,内容就是转一下大小写,有什么作用?

使用vuex的时候,看到有些项目是在store文件夹下面新建一个mutation-types.js文件,内容像下面这样:

export const RECEIVE_ADDRESS = 'receive_address' // 接收地址
export const RECEIVE_USER_INFO = 'receive_user_info' // 接收用户信息
export const RESET_USER_INFO = 'reset_user_info' // 重置用户信息
//...

这样转一下大小写有什么作用?我感觉有点多余。请大佬说一说。

回答:

单一职责咯,就是把 mutation 专门归类到一个文件中了,后面的小写理论上你可以随便写,只不过在一些调试工具显示的信息中会降低可读性,另一点就是,你 commit 的 mutation 的时候,也可以不使用 VERB_FOO 这种变量,直接写后面的小写的部分,但是这样造成的问题是,当你想要更改某一个 mutation 时,必须依赖于它的所有代码都改一遍,耦合性太高了。

回答:

一般情况下,变量的值是常量时,会将变量用大写表示,所以看到一个变量是大写的,可能就是表明,这个变量代表的是常量。

另一种情况就是楼上说的,当你很多地方都用这个常量时,发现常量的值要变,就只能一个一个改用这个常量的地方,而用变量保存,每个地方引用的都是变量,这样只改变量的赋值就行了。

回答:

  1. 减少硬编码,比如多个地方存在“reset_user_info”时,用常量来引用,可维护性更高,减少手抖多一个字母少一个字母的错误。
  2. 大项目多人开发时,对mutations统一管理,找函数很直观。
  3. 可以根据模块来分类来给mutation type命名,名字多长都可以,常量名简短就好了。比如:
export const RESET_USER_INFO = 'user/reset_user_info'
export const GET_PRO_LIST = 'product/get_list'

如果个人小项目,就没必要用了,转来转去麻烦。

回答:

之前在读项目的代码时也和遇到了和题主一样的疑问。

今天在读 Vuex 的文档时发现在文档中就有说明:

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然

使用常量替代 Mutation 事件类型 – Vuex 文档

另外,这种下面这种写法是 ES6 风格的「计算属性命名」

export default {
  [RECEIVE_ADDRESS] (state, {address}) {
    state.address = address
  },

  [RECEIVE_USER_INFO] (state, {userInfo}) {
    state.userInfo = userInfo
  },
  [RESET_USER_INFO] (state) {
    state.userInfo = {}
  }
}

本文地址:H5W3 » 使用vuex的时候,在store文件夹下面新建一个mutation-types.js文件,内容就是转一下大小写,有什么作用?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址