/vuex-workshop

Vuex Workshop

Primary LanguageJavaScript

Vuex Workshop

This is the base application for the Vuex Workshop.

slides

Structure

.
├── config/                     # config files
│   └── ...
├── dist/                       # compiled files
│   └── ...
├── server/                     # server files
│   ├── api.js                  # api
│   ├── dev.js                  # dev server
│   └── index.js                # server entry point
├── src/
│   ├── api/                    # API services (Axios)
│   │   └── ...
│   ├── components/             # UI Components
│   │   └── ...
│   ├── entry/                  # bundle entries
│   │   ├── client.js           # client entry point
│   │   ├── app.js              # shared app entry point for server and client
│   │   └── server.js           # server server entry point
│   ├── router/                 # routing (maps and route components)
│   │   └── index.js            # router entry point
│   └── store/                  # store (Vuex state)
│   │   ├── module/             # store modules (state, actions and mutations)
│   │   │   └── ...
│   │   └── index.js            # store entry point
│   └── views/                  # UI Views
│       └── ...
├── static/                     # pure static assets
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── .stylelintrc.js             # stylelint config
└── package.json                # build scripts and dependencies

Commands

  • Starts a Node.js local development server
    • yarn dev
    • npm run dev
  • Builds server bundle for SSR and client
    • yarn build
    • npm run build
  • Starts a Node.js server in production
    • yarn start
    • npm start
  • Run all linters
    • yarn lint
    • npm lint
  • Run eslint linter
    • yarn eslint
    • npm run eslint
  • Run stylelint linter
    • yarn stylelint
    • npm run stylelint

API

/api/product/list

Retrieve products [GET]

  • Response 200 (application/json)
    • Body 
        { 
    "payload": [
      {
        "id": 1,
        "sku": "...",
        "title": "...",
        "desc": "...",
        "image": "...",
        "stocked": "....",
        "basePrice": 13.72,
        "price": 6.31
      },
      {
        "id": 2,
        "sku": "...",
        "title": "...",
        "desc": "...",
        "image": "...",
        "stocked": "....",
        "basePrice": 13.72,
        "price": 6.31
      }
    ]
  }

/api/product/:id

Retrieve product by id [GET]

  • Response 200 (application/json)
    • Body 
        { 
    "payload": [
      {
        "id": 1,
        "sku": "...",
        "title": "...",
        "desc": "...",
        "image": "...",
        "stocked": "....",
        "basePrice": 13.72,
        "price": 6.31
      }
    ]
  }

/api/basket

Retrieve basket [GET]

Note if there is > 4 products in the basket then it will respond with 500 error

  • Response 200 (application/json)

    • Body 
        { 
    "payload": [
      {
        "id": 32,
        "quantity": 2
      }
    ]
  }

  • Response 500 (application/json)

    • Body 
        { 
    "error": {
      "message": "Server error"
    }
  }

Delete basket [DELETE]

  • Response 200 (application/json)
    • Body 
        {
    "payload": []
  }

/api/basket/product/:id

Add product to basket [POST]

  • Request (application/json)

      {
    "quantity": "1"
  }

  • Response 200 (application/json)

    • Body 
        { 
    "payload": [
      {
        "id": 32,
        "quantity": 2
      }
    ]
  }

Update product in basket [PATCH]

  • Request (application/json)

      {
    "quantity": "4"
  }

  • Response 200 (application/json)

    • Body 
        { 
    "payload": [
      {
        "id": 32,
        "quantity": 4
      }
    ]
  }

Delete product in basket [DELETE]

  • Response 200 (application/json)
    • Body 
        { 
    "payload": []
  }