后端开发教程 - Java、Spring Boot 实战 - msg200.com
编写更好的 Vue JS 代码
介绍
结论
介绍
在项目初期，架构可能并不重要，但组件的轻松添加和移除，以及代码库的合理结构，都体现了代码库的良好结构。让我们来看看如何改进 Vue JS 代码。
使用状态、地图获取器和动作。
使用 Vuex 提供的状态和映射（例如 mapGetters、mapActions、mapState 等）可以使代码高度可复用。如果因为“更快”而将状态硬编码到 SFC 中的 data() 对象中，那么如果将来需要其中一些值，就会带来麻烦。
<!-- first.vue -->
<template>
<h3>{{firstname}}{{lastname}}</h3>
</template>
<script>
export default {
data() {
return {
firstname: "",
lastname: ""
};
},
methods: {
async getFullName() {
const { firstname, lastname } = await fetchNameFromApi();
this.firstname = firstname;
this.lastname = lastname;
}
},
created() {
this.getFullName();
}
};
</script>
项目经理：我们需要名字和姓氏显示在另外两页上。
有了这个请求，您将继续从不同的文件复制、粘贴、导入和导出。
更好的是，
const state = {
firstname: "",
lastname: ""
};
const actions = {
async getFullName({ commit, dispatch }, data) {
getFullNameFromApi().then(res => {
commit(mutate.FULL_NAME, res.body);
});
}
};
const mutations = {
//Set default mutation types in another file
[mutate.UPDATE_FULL_NAME](state, data) {
state.firstname = data.firstName;
state.lastname = data.lastName;
}
};
const getters = {
firstName: state => state.firstname,
lastName: state => state.lastname
};
const FullName = {
state,
actions,
mutations,
getters
};
export default FullName;
然后在我们的first.vue组件上，
<template>
<h3>{{firstName}}{{lastName}}</h3>
</template>
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
methods:{
...mapActions(['getFullName']);
},
created(){
this.getFullName();
},
computed:{
...mapGetters(['firstName', 'lastName']);
}
}
</script>
现在，如果我们需要包含一个需要用户名字和姓氏的新组件，我们可以轻松地映射 getter 和操作。
这也有助于我们避免以下事情：
const firstname = this.$store.state.fullName.firstName;
const lastname = this.$store.state.fullName.lastName;
我们可以简单地使用 getter
computed:{
...mapGetters(['firstName','lastName'])
}
最后，这有助于我们从 SFC 中抽象出业务逻辑，使测试更容易。让 Store 处理所有逻辑，SFC 只需处理与其紧密耦合的内容，例如警报按钮/小吃店的状态等。
通过 Mixins 进行过滤。
Mixins 会导致隐式依赖、命名空间冲突等问题。更多详情请见此处。部分 Mixins 可以转换为 Filter。
//dateMixin.js
export default {
methods: {
formatDate(date) {
return date.split("T")[0];
}
}
};
在我们的 SFC 中，我们有：
<template>
<h3>{{formatDate(date)}}</h3>
</template>
<script>
import dateMixin from "./dateMixin";
export default {
mixins: [dateMixin],
data() {
return {
date: "2019-08-07T00:00:00"
};
}
};
</script>
有了滤镜，
//main.js
import Vue from "vue";
Vue.filter("formatDate", value => value.split("T")[0]);
在我们的证监会，
<template>
<h3>{{date | formatDate}}</h3>
</template>
<script>
export default {
data() {
return {
date: "2019-08-07T00:00:00"
};
}
};
</script>
使用模块来分离应用程序上的不同服务。
我们可以将状态所需的一切都分成模块，而不是放在一个对象中。
而不是
const state = {
token: "",
amount: "",
firstname: "",
lastname: "",
email: "",
isLoggedIn: ""
};
我们可以将我们的服务分为身份验证、配置文件管理和钱包。
我们的文件夹结构如下
modules
authentication
index.js
profile-management
index.js
wallet
index.js
在 index.js 文件中，我们可以获得与该服务相关的状态。
//modules/authentication/index.js
const state = {
token: '',
isLoggedIn:''
}
...
然后，当我们初始化我们的商店时，我们可以添加所有模块。
export const store = new Vuex.store({
state: {
//something general
isAppBusy: false
},
modules:{
authentication,
profile-management,
wallet
}
});
结论
以上就是我对如何优化 Vue 代码结构的一些想法。如果您还有其他补充或删减，欢迎在评论区留言😄。
鏂囩珷鏉ユ簮锛�https://dev.to/obbap/write-better-vue-js-code-36mg