vuexmutations,vuex中mutation方法互调

　　vuex mutations,vuex中mutation方法互调

　　本文主要介绍vuex如何在非组件中调用突变方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

目录

　　在非组件中调用突变方法，在非组件中调用vuex的突变属性，突变属性引入对象样式的提交方法，用常量代替突变事件类型突变必须是同步函数才能在组件中提交突变。

在非组件中调用mutations方法

　　通常，在组件中调用mutations.js中的方法。如果要在非组件中调用它们，需要使用以下方法。

在组件中调用

　　从“vuex”导入{ mapMutations }

　　从“存储/变异类型”导入{SET_IS_LOGIN}

　　导出默认值{

　　方法：{

　　.地图突变({

　　集合_是_登录：集合_是_登录

　　}),

　　init() {

　　this.set_is_login(true)

　　}

　　}

　　}

在非组件中调用

　　从“商店”导入商店

　　从“存储/变异类型”导入{SET_IS_LOGIN}

　　函数init() {

　　store.commit(SET_IS_LOGIN，true)

　　}

vuex的mutations属性

mutations属性介绍

　　是在状态中修改状态的唯一方法；在组件的自定义方法中，使用此。$store.commit((对应于突变中的方法，新值)方法向突变中的对应方法提交新值。突变属性中的每个方法都有两个参数，即状态和有效负载；实际上，state是vuex中的state属性，有效载荷称为突变的有效载荷，实际上是传递的值。通常，payload传输一个对象，因此它可以包含多个字段，并且记录的突变将更具可读性：

　　突变：{

　　增量(状态、有效负载){

　　state.count=有效载荷.数量

　　}

　　}

　　store.commit(increment ，{

　　数量：10

　　})

对象风格的提交方式

　　提交变异的另一种方法是直接使用包含类型属性的对象：

　　store.commit({

　　类型：增量，

　　数量：10

　　})

　　当使用对象样式提交方法时，整个对象作为有效载荷传递给突变函数，因此处理程序保持不变：

　　突变：{

　　增量(状态、有效负载){

　　state.count=有效载荷.数量

　　}

　　}

使用常量替代 Mutation 事件类型

　　使用常量代替突变事件类型是各种Flux实现中的常见模式。这样可以让linter这样的工具工作，同时，把这些常量放在一个单独的文件中，可以让你的代码协作者一眼就知道整个app中包含的突变：

　　//突变类型. js

　　export const SOME _ MUTATION= SOME _ MUTATION

　　//store.js

　　从“vuex”导入Vuex

　　从导入{ SOME_MUTATION }。/突变类型

　　const store=new Vuex。商店({

　　状态：{.},

　　突变：{

　　//我们可以使用ES2015风格的计算属性命名函数来使用一个常数作为函数名

　　[某些_突变](状态){

　　//改变状态

　　}

　　}

　　})

　　不使用常量由你决定。这在需要多人协作的大型项目中很有帮助。但如果你不喜欢，也可以不喜欢。

Mutation 必须是同步函数

　　一个重要的原则是记住突变必须是同步函数。为什么？请参考以下例子：

　　突变：{

　　某些突变(状态){

　　api.callAsyncMethod(()={

　　状态.计数

　　})

　　}

　　}

　　现在，假设我们正在调试一个应用程序，并在devtool中观察突变日志。每一个突变都被记录下来，devtools需要捕捉前一个状态和下一个状态的快照。但是，在上面的例子中，mutation中异步函数中的回调使得这一点变得不可能：因为当mutation被触发时，回调函数还没有被调用，devtools不知道回调函数何时被实际调用3354。本质上，回调函数中的任何状态变化都是不可追踪的。

在组件中提交 Mutation

　　你可以用这个。$ store.commit (XXX )提交一个突变，或者使用mapMutations辅助函数将组件中的方法映射到store.commit调用中(需要注入到根节点的存储中)。

　　从“vuex”导入{ mapMutations }

　　导出默认值{

　　//.

　　方法：{

　　.地图突变([

　　增量,//将` this.increment()映射为"这个store . commit( increment )

　　//`地图突变也支持载荷：

　　增量依据//将` this.incrementBy(amount)映射为"这个store.commit(incrementBy ，amount)`

　　]),

　　.地图突变({

　　添加：增量//将` this.add()映射为"这个store . commit( increment )

　　})

　　}

　　}

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。