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

2024年1月25日 160次阅读 来源: zuank

v-model的使用

通过合理的设置set() 和get()实现v-model

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.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按照组件对应拆分，将modules按字段含义拆分

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

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

将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)
}
    原文作者：zuank
    原文地址: https://segmentfault.com/a/1190000010560962
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞