Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten
clients/store/index.js
actions: { // ... async savePost(context, { title, url }) { const user = this.$auth.user const data = { id: uuid(), userId: user.id, author: user.username, title, url, votes: [], timestamp: new Date().getTime() }
try { await this.$axios.post('/api/posts', data) } catch (error) { console.error(error) } },},
We start off by getting a reference to the current user from the auth module (available within our store as this.$auth
). We’re then constructing an object literal with the properties for the new post. We’re also adding an empty votes
array, as this is how we’re going to keep track of the users who’ve upvoted a post.
Once the data
object is built, we’re using the axios module to submit it via a POST request to our back-end API.
Fetching and Displaying Posts
Now that we have a way for users to submit links, we’re going to need a way to retrieve those and display them, so let’s build out the “new posts” page.
Before creating the page itself, let’s make the necessary changes to the store.
client/store/index.js
state: { posts: []},