Question

我正在研究Vue（2.x）+ Vuex一段时间了，我经常看到的一种模式是使用突变类型。

对我来说，增加具有更多文件的项目的复杂性只是不必要的代码，也许我没有足够的经验来了解实际用法，因此是这个问题。

根据Mutation Types docs指出它是完全可选的，如果您喜欢它还指出“，则应使用”。这将允许代码利用像linters这样的工具，并将所有常量放入单个文件可让您的协作者一目了然地查看整个应用程序中可能发生的变异”。并在那里停止。

还有：

在大多数情况下，是否使用常量都是首选-在具有许多开发人员的大型项目中可能会有所帮助，但是如果您不喜欢它们，则完全是可选的

我想了解的是在工具和所谓的大型项目中，这里的优势到底是什么。其中的一些示例真的很不错。

即使文档中的示例代码也足够愚蠢以至于阻止它：

//mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION';

// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // we can use the ES2015 computed property name feature // to use a constant as the function name [SOME_MUTATION] (state) { // mutate state } } })

不只是：

// store.js import Vuex from 'vuex' const store = new Vuex.Store({ state: { ... }, mutations: { //To me this is already clear enough to understand the purpose //of the mutation and to see AT-A-GLANCE what all mutations in the //Application are someMutation (state) { // mutate state } } })

特别是因为现代的IDE（Eclipse，Npp做到了）已经具有分组功能，这意味着您可以一目了然地完成所有操作，例如：

... mutations: { + someMutation1 + someMutation2 + someMutation3 + someMutation4 + someMutation5 + someMutation6 + someMutation7 } ...

我没有看到这种事情的实际用法，就像5 Monkeys Experiment

Answer 1

假设您有此示例：

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    setRelationshipWithRolePlayers (state) {
      // mutate state
    }
  }
})

然后在另一个组件中执行：

this.$store.commit('setRelationshipsWithReolePlayers');

导入常量可以节省您花费时间调试由上述小错别字引起的问题，可悲的是，这种错别字发生的次数比我们希望的多。

另外，当您有大量的变异和动作时（将变异类型也用于动作也很好），记住它们的调用方式并不容易，因此从mutation-types文件导入它们非常容易具有自动完成功能的自动导入常量。

还可以在同一文件中包含所有突变和操作，从而轻松检查突变/操作名称是否已在项目的另一部分中使用，而无需进行全局搜索（请注意，随着项目的增长，可能想模块化您存储的商店或拥有多个存储的商店。

它可能不会决定项目的成功或失败，但是它可以提供很大的帮助，并为您节省大量的中型项目时间

Answer 2

在使用mapMutations或使用Symbol作为方法名称时，我会使用“突变类型”跳过拼写错误

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
export const SOME_MUTATION_SYMBOL = Symbol('SOME_MUTATION')

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION, SOME_MUTATION_SYMBOL } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    },
    [SOME_MUTATION_SYMBOL] (state) {
      // mutate state
    }
  }
})


import { mapMutations } from 'vuex'
import { SOME_MUTATION, SOME_MUTATION_SYMBOL } from './mutation-types'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 'SOME_MUTATION' 
      SOME_MUTATION // no typos and you get IDE intellisence
    ]),
    ...mapMutations({
      localName: SOME_MUTATION_SYMBOL // map to localName
    })
  }
}

Vuex中突变类型的实际用法

2 个答案: