我的关于vue全家桶开发规范的梳理

时间 2019-12-07

原文原文链接

v-model的使用

经过合理的设置set() 和get()实现v-modelhtml

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

template index.html的配置

常规template下，route对象不能方便的获取
常规template前端

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-cli</title>
  </head>
  <body>
  <div id="app">
  </div>
  </body>
</html>

对应的App.vuevue

<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的位置咱们会放导航栏等不多和后台交互的结构，可是仍是会须要拿到当前的前端路由作不一样的展现。vue-router

对index.html进行从新配置更好的结合vue-router使用vuex

<!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配置vue-cli

优先选择赋值操做来修改对象

$watch：在变异（不是替换）对象或数组时，旧值将与新值相同，由于它们的引用指向同一个对象/数组。Vue 不会保留变异以前值的副本。数据库

对数组和对象从新赋值能够实现watch正确的返回旧值和新值segmentfault

state.list = [...list,{name:0}]
state.user = {...,age:9}

将action按照组件对应拆分，将modules按字段含义拆分

当咱们将业务逻辑放在action中处理的时候，action的文件也会相应的愈来愈大。按照组件对应拆分，将一个组件或一个目录对应一个action.js会更好管理。数组

modules主要用来存储state中的数据，命名和分类应该按照state具体的含义划分app

将mutation中的逻辑解耦

若是一段逻辑代码涉及多种更新操做，应该依次调用多个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 vm

mutation中引用并使用

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

1. 史上最全的Vue开发规范
2. Vue全家桶
3. vue全家桶
4. Vue 全家桶
5. VUE全家桶
6. Vue全家桶开发项目
7. Vue全家桶之组件化开发
8. vue全家桶和react全家桶
9. 关于开发规范
10. Vue全家桶问题合集（不少eslint规范问题）
更多相关文章...
• Spring使用AspectJ开发AOP：基于XML和基于Annotation - Spring教程
• RSS 发布您的 Feed - RSS 教程
• PHP开发工具
• ☆基于Java Instrument的Agent实现