我的關於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實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。