Vue 3中的To应用程序前端
我已经在后端(API)和Vue 3前端安装了一个有Slim框架的待办事项应用程序。我在YouTube频道上添加了一个演示。
在主App.vue文件中，我有：
import axios from 'axios'
import '@fortawesome/fontawesome-free/js/all.js';
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
List,
Footer
},
data() {
return {
apiUrl: "http://todo.com/api",
dataIsLoaded: false,
isValidInput: true,
todos: [],
unsolvedTodos: [],
}
},
methods: {
showTodos: function(){
axios.get(`${this.apiUrl}/todos`)
.then((response) => {
this.todos = response.data;
})
.then(this.getUnsolvedTodos)
.then(this.dataIsLoaded = true);
},
getUnsolvedTodos: function(){
this.unsolvedTodos = this.todos.filter(todo => {
return todo.completed == 0;
});
},
toggleTodo: function(todo) {
let newStatus = todo.completed == "0" ? 1 : 0;
axios.put(`${this.apiUrl}/todo/update/${todo.id}`, {
title: todo.title,
completed: newStatus
})
},
deleteTodo: function(id) {
axios.delete(`${this.apiUrl}/todo/delete/${id}`)
},
addTodo: function(newTitle){
const newToDo = {
title: newTitle,
completed: 0
}
if(newTitle.length > 2){
this.isValidInput = true;
axios.post(`${this.apiUrl}/todo/add`, newToDo);
} else {
this.isValidInput = false;
}
}
},
created() {
this.showTodos();
},
watch: {
todos() {
this.showTodos();
}
}
}在Header.vue中：
export default {
props: {
title: String,
unsolvedTodos: Array
},
}在footer.vue中：
export default {
name: 'Footer',
props: {
placeholder: String,
validationMsg: String,
isValidInput: Boolean
},
data () {
return {
newTitle: '',
}
},
methods: {
addTodo() {
this.$emit('add-todo', this.newTitle)
this.newTitle = ''
}
}
}待办事项列表(List.vue)：
import TodoItem from "./TodoItem.vue";
export default {
name: 'List',
components: {
TodoItem,
},
props: {
dataIsLoaded: Boolean,
todos: Array
},
emits: [
'delete-todo',
'toggle-todo'
]
}单一待办事项(TodoItem.vue)：
export default {
name: 'TodoItem',
props: {
todo: Object
}
}问题/关切：
- 应用程序结构良好吗？
- 代码能被大大“缩短”吗？
回答 1
Code Review用户
发布于 2021-06-11 18:18:50
应用程序结构良好吗？
总的来说，这似乎没什么问题，不过请看下一个问题的答案，这意味着结构可能会稍微变好。
代码能被大大“缩短”吗？
Simon说:使用计算属性
与西蒙建议:使用计算属性类似，getUnsolvedTodos()内部的实现可以移动到计算属性中，使用return而不是将调用.filter()的结果分配给数据变量。然后，不需要调用该方法并在data函数返回的对象中设置属性。
承诺回调整合
对axios.get()在showTodos()中的调用有多个.then()回调：
showTodos:函数(){ axios.get(
${this.apiUrl}/todos) .then((响应) => { this.todos = response.data；}) .then(this.getUnsolvedTodos) .then(this.dataIsLoaded = true)；}，
这些可以合并成一个单一的回调--特别是因为它们没有一个能兑现承诺。
showTodos: function(){
axios.get(`${this.apiUrl}/todos`)
.then((response) => {
this.todos = response.data;
this.getUnsolvedTodos(); //this can be removed - see previous section
this.dataIsLoaded = true;
});
},虽然这确实需要增加一行，但这将避免混淆，因为阅读代码的人可能会认为传递给.then()的语句应该是返回承诺的函数。
单用变量
在toggleTodo中，变量newStatus只使用一次，因此可以将其合并到传递给调用的对象中：
axios.put(`${this.apiUrl}/todo/update/${todo.id}`, {
title: todo.title,
completed: todo.completed == "0" ? 1 : 0
})如果保留该变量，则可以使用const而不是let创建该变量，因为它永远不会被重新分配。
将事件传递给父
在List.vue中，具有以下属性：
@删除-todo=“$emit(‘删除-todo’，todo.id)”@toggle=“$emit(‘todo’，todo)”
这些看起来是多余的。在Vue 2中，这些行可以替换为一行：v-on="$listeners"，但显然是它被Vue3 3删除了。我试着用v-bind="$attrs"替换那些行，但是它似乎不起作用--我将搜索VueJS 3的方法来实现这一点。
https://codereview.stackexchange.com/questions/261363
复制相似问题
腾讯云开发者
