SitePoint
  • Blog
  • Discord
  • Forum
  • Library
  • Login
Join Premium

Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten

Close
  1. Preface
    • Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten
    • Notice of Rights
    • Notice of Liability
    • Trademark Notice
    • About SitePoint
  2. 1Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten
    • Installing Nuxt.js
    • Layout and Styling
    • Faking the Back End
    • Authentication
    • Adding New Posts
    • Fetching and Displaying Posts
    • The NewsItem Component
    • Handling Comments
    • Upvoting Posts
    • Authorization
    • Summary

You don't have any bookmarks for this book yet.

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: []},
End of PreviewSign Up to unlock the rest of this title.

Community Questions