Vuex如何脚本化生成mutations,优势和业务便利性在哪里?

本文主要是介绍Vuex如何脚本化生成mutations,优势和业务便利性在哪里?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

说脚本之前,先看一下这些繁琐的操作是否在你的vue项目中存在?

1.在modules下每新生成一个文件就要新建 state  getters mutations actions 

2.在每个需要用到vuex的地方进行store 引入

3.每次更改state时, 都要防止mutations 函数名称打错, 或频繁到mutations 下的函数中去ctrl c ,再到commit 里去 ctrl v 

如果你正在被上面的繁琐工作掣肘,那么就和我一起来看一下,如何在vue项目中优雅的使用Vuex吧。

我们常规操作下,modules 下的  store 文件都是这样写的:

user.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {user: 'xiaoming',age: '18'},getters: {getMessage(state) {return state.user + 'is' + age + 'years old'}},mutations: {set_user:(state, user) => {state.user = user},set_age:(state, age) => {state.age = age}},actions: {changeUser({commit}, res) {commit('set_user', res.user)commit('set_age', res.age)}}
})

如上:

1.我们每添加一个state 的属性,文件中的 getters  mutations actions  如果业务需要,都需要我们手动配套生成,这就是一个极其繁琐的操作

2.我们在组件中使用该store 时,需要将 如果需要读取state , 或 改变state, 需要在组件中引入Map辅助函数 ,使用 mapXXX   来操作

3.使用commit 改变state时, 需要手动键入mutations 的函数名,因此会频繁的使用c v大法保证函数名不出错

优雅的使用Vuex:

vuex => modules => user.js

export default {state: {user: 'xiaohong',age: '12'}
}

vuex => store.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'Vue.use(Vuex)var state = {}
var getters = {}
var mutations = {}
var modules= {user
}/**
*将obj内的值添加到state中
*{object} state store的共享数据
*{object} obj 组件更改的数据对象
*/
var setObjToState = function(state, obj) {for(var f in obj) {state[f] = obj[f]}
}//自动生成mutations 函数
for (var m in modules) {modules[m].mutations = modules[m] || {}modules[m].mutations[m + 'SetMutations'] = setObjToState
}export default new Vuex.store({state,getters,mutations,modules
})

在项目的 main.js  内:

import Vue from 'vue'
import store from './vuex/store'new Vue({components: {app},store,template: '<App/>
}).$mount(#app')

在组件内:

<template><div id="app"></div>
</template><script>
export default {data () {user: 'jiajia',age: '6'},methods: {changeUser () {let _t = this//无论在 store 的 state 里新增多少属性, 在改变state时只需用通过 模块名+SetMutations 进行调用即可_t.$store.commit('userSetMutations', {user: _t.user,age: _t.age})}}
}
</script>

可以看到在store.js  优化后, 无论在 store 的 state 里新增多少属性,都无需配套新增mutations 等函数, 而且在改变state时只需用通过 模块名+SetMutations 进行调用即可,不用担心函数名键入错误,或频繁使用cv大法。

内容原创,转载注明出处。

这篇关于Vuex如何脚本化生成mutations,优势和业务便利性在哪里?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/305387

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo