Ruth.demo add crud #294
Ruth.demo add crud #294
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| }, | ||
| async deleteBlog({ commit }, id) { | ||
| const res = await this.$axios.delete( | ||
| `https://blog-app-backend.onrender.com/api/articles/${id}` |
There was a problem hiding this comment.
An absolute URL is unnecessary since the baseUrl is set in nuxt.config.js.
| @@ -0,0 +1,53 @@ | |||
| import axios from 'axios' | |||
There was a problem hiding this comment.
No need to import axios. this.$axios can be used to access global variable.
| export const actions = { | ||
| async fetchBlogs({ commit }) { | ||
| const response = await axios.get( | ||
| 'https://blog-app-backend.onrender.com/api/articles/all' |
There was a problem hiding this comment.
Instead we can do await this.$axios.get('articles/all')
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', | ||
| }, | ||
| ], | ||
| isLoggedIn: false, |
There was a problem hiding this comment.
Since it is a read-only property, this can be a computed property.
| } | ||
| }, | ||
| computed: { ...mapState('ruth', ['blogs']) }, | ||
| created() { | ||
| this.isLoggedIn = this.$auth.$state.user |
There was a problem hiding this comment.
Instead of this.$auth.$state.user nuxt auth provides this.$auth.loggedIn which returns boolean.
| `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`, | ||
| config |
There was a problem hiding this comment.
Let's move all network requests to vuex.
| title: '', | ||
| content: '', |
There was a problem hiding this comment.
A better approach would be to have an object that represents a blog
blog: {
title: '',
content: ''
}
| this.newBlog = { | ||
| title: this.title, | ||
| content: this.content, | ||
| description: 'description', | ||
| } |
There was a problem hiding this comment.
If we apply the above recommendation, we won't need this.
| content: this.content, | ||
| description: 'description', | ||
| } | ||
| this.$store.dispatch('ruth/addBlog', this.newBlog) |
There was a problem hiding this comment.
this.$store.dispatch('ruth/addBlog', this.blog)
| this.blogTitle = '' | ||
| this.blogContent = '' |
There was a problem hiding this comment.
Clearing the properties can be done by separate method.
| this.dialog = !this.dialog | ||
| this.current = blog | ||
| }, | ||
| updBlog(id) { |
There was a problem hiding this comment.
better naming saveChanges(id)
| </nuxt-link> | ||
| <v-spacer></v-spacer> | ||
|
|
||
| <v-dialog v-model="dialog" persistent max-width="600px"> |
There was a problem hiding this comment.
Let's separate UpdateBlog to its own component
| title: '', | ||
| content: '', |
There was a problem hiding this comment.
Same style can be applied to this.
- Making this its own object.
No description provided.