Vuex中变异类型的实际用法

Question

我现在正在研究Vue(2.x)+ Vuex一段时间,而我一直看到的一种模式是使用Mutation Types.

对我而言,添加复杂性到更多文件的项目只是不必要的代码,也许我没有足够的经验来理解它的实际用法,因此这个问题.

按照突变类型文档它说,它完全是可选的,如果你喜欢它也指出,你应该使用"这让代码采取像棉短绒加工的优势,并把所有的常量在一个单一的文件允许合作者获得一目了然地看到整个申请中可能出现的突变"并且它就此止步.

并且:

是否使用常量在很大程度上是一种偏好 - 它对于许多开发人员的大型项目很有帮助,但如果你不喜欢它们则完全是可选的

我想了解的是,这里的工具和所谓的大型项目的优势究竟是什么.它的一些例子非常好.

即使是文档中的示例代码也足以劝阻它:

//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猴子实验

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
    })
  }
}