脚本宝典收集整理的这篇文章主要介绍了个人关于vue全家桶开发规范的梳理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
通过合理的设置set() 和get()实现v-model
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}常规template下，route对象不能方便的获取
常规template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-cli</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>对应的App.vue
<template>
<div>
<router-view></router-view>
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
components: {
Hello
}
}
</script>
<style>
...
</style>
这种情况下App.vue和Hello.vue都不能很方便的获取到this.route，因为并没有渲染在<router-view></router-view>内部。
虽然一般情况下，Hello的位置我们会放导航栏等很少和后台交互的结构，但是还是会需要拿到当前的前端路由做不同的展示。
对index.html进行重新配置 更好的结合vue-router使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-cli</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>在模板中添加<router-view></router-view>可以使整个项目都是基于路由开发的。
可以参考基于vue-cli的vuex配置
$watch：在变异（不是替换）对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
对数组和对象重新赋值可以实现watch正确的返回旧值和新值
state.list = [...list,{name:0}]
state.user = {...,age:9}当我们将业务逻辑放在action中处理的时候，action的文件也会相应的越来越大。按照组件对应拆分，将一个组件或一个目录对应一个action.js会更好管理。
modules主要用来存储state中的数据，命名和分类应该按照state具体的含义划分
如果一段逻辑代码涉及多种更新操作，应该依次调用多个
commit进行更新，而不是定义在一个mutation中
1. 不做隐式的删除更新等操作
所谓隐式的操作就是给一个数组或对象的其中一种变化提供了多个入口。
一方面会出现代码冗余，另一方面会不好维护。2. 将功能拆分为最小功能
state是用作状态存储，也可以形象的理解为数据库。
提供了修改保存的功能但是不考虑逻辑，所以功能尽可能偏向于
把对象a赋值为对象b
把下标为5的对象中name字段的值改为"测试"mutation中调用另外的mutation
作为一种解决方案这是可行的，但是他是不好的。
实现代码：
将main.js中的vue对象暴露
const vm = new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
export default vmmutation中引用并使用
import vm from '../../main.js'
'CHANGE_NAME' (state, info) {
state.name.changed = true
vm.$store.commit('ADD_USER', {
type: '1'
})
},
'ADD_USER' (state, info) {
...
}
VUEX 推荐的做法
actions.js
export function changeUser ({
dispatch,
commit
}, info) {
commit('CHANGE_NAME', info)
commit('ADD_USER', info)
}以上是脚本宝典为你收集整理的个人关于vue全家桶开发规范的梳理全部内容，希望文章能够帮你解决个人关于vue全家桶开发规范的梳理所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。