├── .gitignore
├── LICENSE
├── README.md
├── auth
    ├── .babelrc
    ├── README.md
    ├── components
    │   ├── auth.vue
    │   ├── protected.vue
    │   ├── require_auth.js
    │   ├── signin.vue
    │   └── signup.vue
    ├── controllers
    │   └── auth.js
    ├── index.html
    ├── models
    │   └── user.js
    ├── package-lock.json
    ├── package.json
    ├── server.js
    ├── services
    │   └── passport.js
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   └── index.js
    └── webpack.config.js
├── counter
    ├── .babelrc
    ├── README.md
    ├── components
    │   └── counter.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   └── index.js
    └── webpack.config.js
├── firestore
    ├── .babelrc
    ├── README.md
    ├── components
    │   └── simple-todo.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   ├── firestore.js
    │   └── index.js
    └── webpack.config.js
├── gallery
    ├── .babelrc
    ├── README.md
    ├── components
    │   ├── image-form.vue
    │   └── images.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   └── index.js
    └── webpack.config.js
├── shopping-cart
    ├── .babelrc
    ├── README.md
    ├── components
    │   ├── cart.vue
    │   └── products.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   └── router.js
    ├── store
    │   └── index.js
    └── webpack.config.js
├── simple-todo
    ├── .babelrc
    ├── README.md
    ├── components
    │   └── simple-todo.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   └── index.js
    └── webpack.config.js
├── starter-files
    ├── .babelrc
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    ├── store
    │   └── index.js
    └── webpack.config.js
└── todo
    ├── .babelrc
    ├── README.md
    ├── components
        └── todo.vue
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
        ├── App.vue
        ├── assets
        │   └── logo.png
        └── main.js
    ├── store
        └── index.js
    └── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | 
 5 | # Editor directories and files
 6 | .idea
 7 | *.suo
 8 | *.ntvs*
 9 | *.njsproj
10 | *.sln
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Ademola Adegbuyi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vuex Examples
 2 | 
 3 | > This project aims to touch various aspects of Vuex while building several projects.
 4 | 
 5 | ## Contents
 6 | 
 7 | - [Projects](#projects)
 8 | - [Getting Started](#getting-started)
 9 | - [Running each project](#running-each-project)
10 | 
11 | ### Projects
12 | 
13 | Browse through each project by going through the folders as listed below.
14 | 
15 | - **Starter Files**: Where it all begins
16 | - **Auth**: An Auth example with Vuex
17 | - **Counter**: A simple counter implementation with Vuex
18 | - **Firestore**: A Simple FireStore implementation with Vuex
19 | - **Gallery**: An Image Gallery implementation with Vuex
20 | - **Simple Todo**: A Simple Todo implementation with Vuex
21 | - **Shopping Cart**: A Shopping Cart implementation with Vuex
22 | - **Todo**: A better todo app implementation with Vuex
23 | - [_Make request_](https://github.com/ooade/vuex-examples/issues/new)
24 | 
25 | ### Getting Started
26 | 
27 | - Clone the Repo: `git clone https://github.com/ooade/vuex-examples.git`
28 | 
29 | ### Running each project
30 | 
31 | ```bash
32 | # install dependencies
33 | npm --prefix <project> install <project>
34 | 
35 | # serve with hot reload at localhost:8080
36 | npm --prefix <project> run dev
37 | 
38 | # build for production with minification
39 | npm --prefix <project> run build
40 | ```
41 | 
42 | Example: To run the auth project
43 | 
44 | ```bash
45 | npm --prefix auth install
46 | npm --prefix auth run dev
47 | npm --prefix auth run build
48 | ```
49 | 
50 | > Happy Coding!
51 | 
52 | ## License
53 | 
54 | MIT
55 | 


--------------------------------------------------------------------------------
/auth/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": [["@babel/preset-env", { "modules": false }]],
3 | 	"plugins": ["@babel/plugin-syntax-object-rest-spread"]
4 | }
5 | 


--------------------------------------------------------------------------------
/auth/README.md:
--------------------------------------------------------------------------------
1 | # Auth Example
2 | 
3 | > An Auth example with Vuex which uses express, jwt and passport :smile:
4 | 
5 | > [View App](https://vuex-auth.now.sh)


--------------------------------------------------------------------------------
/auth/components/auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<div class="error">
 4 | 			{{ authError }}
 5 | 		</div>
 6 | 		<signin />
 7 | 		<signup />
 8 | 	</div>
 9 | </template>
10 | 
11 | <script>
12 | 	import { mapState } from 'vuex'
13 | 	import signin from './signin.vue'
14 | 	import signup from './signup.vue'
15 | 
16 | 	export default {
17 | 		components: {
18 | 			signin,
19 | 			signup
20 | 		},
21 | 		computed: mapState(['authError', 'authenticated']),
22 | 		watch: {
23 | 			authenticated() {
24 | 				this.$router.push('/protected')
25 | 			}
26 | 		}
27 | 	}
28 | </script>
29 | 
30 | 
31 | <style>
32 | 	.error {
33 | 		color: red;
34 | 	}
35 | 
36 | 	body {
37 | 		max-width: 500px;
38 | 		text-align: center;
39 | 		margin: auto;
40 | 	}
41 | 
42 | 	form {
43 | 		margin: 20px
44 | 	}
45 | 
46 | 	input,
47 | 	button {
48 | 		display: block
49 | 	}
50 | </style>
51 | 


--------------------------------------------------------------------------------
/auth/components/protected.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div>
3 | 		Congrats! You found me :p
4 | 	</div>
5 | </template>


--------------------------------------------------------------------------------
/auth/components/require_auth.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import axios from 'axios'
 3 | 
 4 | import store from '../store'
 5 | 
 6 | export default (to, from, next) => {
 7 | 	// verify token ;)
 8 | 	axios
 9 | 		.get('/auth/verify', { headers: { auth: localStorage.token } })
10 | 		.then(res => {
11 | 			// user is auth :)
12 | 			store.commit('AuthUser')
13 | 			next()
14 | 		})
15 | 		.catch(err => {
16 | 			// send user to login page :(
17 | 			next('/login')
18 | 		})
19 | }
20 | 


--------------------------------------------------------------------------------
/auth/components/signin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<form class="signin-form"
 3 | 	      @submit.prevent="signin">
 4 | 		<input type="email"
 5 | 		       placeholder="email"
 6 | 		       v-model="email" />
 7 | 		<input type="password"
 8 | 		       placeholder="password"
 9 | 		       v-model="password" />
10 | 		<button>Signin</button>
11 | 	</form>
12 | </template>
13 | 
14 | <script>
15 | 	export default {
16 | 		data() {
17 | 			return {
18 | 				email: '',
19 | 				password: ''
20 | 			}
21 | 		},
22 | 		methods: {
23 | 			signin() {
24 | 				this.$store.dispatch({
25 | 					type: 'signin',
26 | 					email: this.email,
27 | 					password: this.password
28 | 				})
29 | 				this.email = ''
30 | 				this.password = ''
31 | 			}
32 | 		}
33 | 	}
34 | </script>
35 | 
36 | 


--------------------------------------------------------------------------------
/auth/components/signup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<form class="signup-form"
 3 | 	      @submit.prevent="signup">
 4 | 		<input type="email"
 5 | 		       placeholder="email"
 6 | 		       v-model="email" />
 7 | 		<input type="password"
 8 | 		       placeholder="password"
 9 | 		       v-model="password" />
10 | 		<button>Signup</button>
11 | 	</form>
12 | </template>
13 | 
14 | <script>
15 | 	export default {
16 | 		data() {
17 | 			return {
18 | 				email: '',
19 | 				password: ''
20 | 			}
21 | 		},
22 | 		methods: {
23 | 			signup() {
24 | 				this.$store.dispatch({
25 | 					type: 'signup',
26 | 					email: this.email,
27 | 					password: this.password
28 | 				})
29 | 				this.email = ''
30 | 				this.password = ''
31 | 			}
32 | 		}
33 | 	}
34 | </script>


--------------------------------------------------------------------------------
/auth/controllers/auth.js:
--------------------------------------------------------------------------------
 1 | const jwt = require('jwt-simple')
 2 | const User = require('../models/user')
 3 | 
 4 | function tokenForUser(user) {
 5 | 	const timeStamp = new Date().getTime()
 6 | 	return jwt.encode({ sub: user.id, iat: timeStamp }, 'VueJS')
 7 | }
 8 | 
 9 | exports.signin = (req, res, next) => {
10 | 	//User has already had their email and password auth'd
11 | 	//req.user is passed on from passort
12 | 	res.send({ token: tokenForUser(req.user) })
13 | }
14 | 
15 | exports.signup = (req, res, next) => {
16 | 	const email = req.body.email
17 | 	const password = req.body.password
18 | 
19 | 	if (!email || !password) {
20 | 		return res.status(422).send('You must provide email and password')
21 | 	}
22 | 
23 | 	User.findOne({ email }, (err, existingUser) => {
24 | 		if (err) {
25 | 			return next(err)
26 | 		}
27 | 
28 | 		if (existingUser) {
29 | 			return res.status(422).send('Email is in use')
30 | 		}
31 | 
32 | 		const user = new User({ email, password })
33 | 
34 | 		user.save(err => {
35 | 			if (err) {
36 | 				return next(err)
37 | 			}
38 | 
39 | 			res.json({ token: tokenForUser(user) })
40 | 		})
41 | 	})
42 | }
43 | 


--------------------------------------------------------------------------------
/auth/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div id="app"></div>
10 | </body>
11 | 
12 | </html>


--------------------------------------------------------------------------------
/auth/models/user.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const Schema = mongoose.Schema
 3 | const bcrypt = require('bcrypt-nodejs')
 4 | 
 5 | const userSchema = new Schema({
 6 | 	email: { type: String, unique: true, lowercase: true },
 7 | 	password: String
 8 | })
 9 | 
10 | //OnSave Encrypt Password
11 | userSchema.pre('save', function(next) {
12 | 	const user = this
13 | 
14 | 	bcrypt.genSalt(10, (err, salt) => {
15 | 		if (err) {
16 | 			return next(err)
17 | 		}
18 | 
19 | 		bcrypt.hash(user.password, salt, null, (err, hash) => {
20 | 			if (err) {
21 | 				return next(err)
22 | 			}
23 | 
24 | 			user.password = hash
25 | 			next()
26 | 		})
27 | 	})
28 | })
29 | 
30 | userSchema.methods.comparePassword = function(candidatePassword, callback) {
31 | 	bcrypt.compare(candidatePassword, this.password, (err, isMatch) => {
32 | 		if (err) {
33 | 			return callback(err)
34 | 		}
35 | 
36 | 		callback(null, isMatch)
37 | 	})
38 | }
39 | 
40 | const ModelClass = mongoose.model('user', userSchema)
41 | 
42 | module.exports = ModelClass
43 | 


--------------------------------------------------------------------------------
/auth/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development node server.js",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "node server.js"
11 | 	},
12 | 	"dependencies": {
13 | 		"axios": "^0.16.2",
14 | 		"bcrypt-nodejs": "0.0.3",
15 | 		"body-parser": "^1.18.2",
16 | 		"express": "^4.16.3",
17 | 		"jwt-simple": "^0.5.1",
18 | 		"mongoose": "^5.1.4",
19 | 		"passport": "^0.4.0",
20 | 		"passport-jwt": "^4.0.0",
21 | 		"passport-local": "^1.0.0",
22 | 		"vue": "^2.5.17",
23 | 		"vue-router": "^2.8.1",
24 | 		"vuex": "^2.5.0"
25 | 	},
26 | 	"devDependencies": {
27 | 		"@babel/core": "^7.1.2",
28 | 		"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
29 | 		"@babel/preset-env": "^7.1.0",
30 | 		"babel-loader": "^8.0.4",
31 | 		"cross-env": "^3.0.0",
32 | 		"css-loader": "^1.0.0",
33 | 		"file-loader": "^2.0.0",
34 | 		"html-webpack-plugin": "^3.2.0",
35 | 		"vue-loader": "^15.4.2",
36 | 		"vue-style-loader": "^4.1.2",
37 | 		"vue-template-compiler": "^2.5.17",
38 | 		"webpack": "^4.20.2",
39 | 		"webpack-cli": "^3.1.2",
40 | 		"webpack-dev-middleware": "^3.4.0"
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/auth/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const bodyParser = require('body-parser');
 3 | const mongoose = require('mongoose');
 4 | const passport = require('passport');
 5 | 
 6 | const app = express();
 7 | 
 8 | const MONGO_URI =
 9 | 	process.env.NODE_ENV === 'development'
10 | 		? 'mongodb://localhost:27017/auth'
11 | 		: 'mongodb://heroku_x4xnglm7:em5c6br38p6molbe25j3qfqod6@ds011880.mlab.com:11880/heroku_x4xnglm7';
12 | 
13 | mongoose.connect(MONGO_URI);
14 | 
15 | if (process.env.NODE_ENV === 'development') {
16 | 	const webpack = require('webpack');
17 | 	const webpackDevMiddleware = require('webpack-dev-middleware');
18 | 	const config = require('./webpack.config');
19 | 	const compiler = webpack(config);
20 | 
21 | 	app.use(
22 | 		webpackDevMiddleware(compiler, {
23 | 			noInfo: true,
24 | 			publicPath: config.output.publicPath,
25 | 			writeToDisk: filePath => {
26 | 				return /.*\.html$/.test(filePath);
27 | 			}
28 | 		})
29 | 	);
30 | }
31 | 
32 | app.use(bodyParser.json());
33 | 
34 | const Auth = require('./controllers/auth');
35 | require('./services/passport');
36 | 
37 | const requireAuth = passport.authenticate('jwt', { session: false });
38 | const requireSignin = passport.authenticate('local', { session: false });
39 | 
40 | app.post('/auth/signin', requireSignin, Auth.signin);
41 | app.post('/auth/signup', Auth.signup);
42 | app.get('/auth/verify', requireAuth);
43 | 
44 | app.use('/dist', express.static(process.cwd() + '/dist'));
45 | 
46 | app.use((req, res) => res.sendFile(__dirname + '/dist/index.html'));
47 | 
48 | app.listen(3000, () => console.log('Server Listening on PORT 3000'));
49 | 


--------------------------------------------------------------------------------
/auth/services/passport.js:
--------------------------------------------------------------------------------
 1 | const passport = require('passport')
 2 | const User = require('../models/user')
 3 | const JwtStrategy = require('passport-jwt').Strategy
 4 | const ExtractJwt = require('passport-jwt').ExtractJwt
 5 | const LocalStrategy = require('passport-local')
 6 | 
 7 | const localOptions = { usernameField: 'email' }
 8 | const localLogin = new LocalStrategy(localOptions, (email, password, done) => {
 9 | 	User.findOne({ email }, (err, user) => {
10 | 		if (err) {
11 | 			return done(err)
12 | 		}
13 | 		if (!user) {
14 | 			return done(null, false)
15 | 		}
16 | 
17 | 		user.comparePassword(password, (err, isMatch) => {
18 | 			if (err) {
19 | 				return done(err)
20 | 			}
21 | 			if (!isMatch) {
22 | 				return done(null, false)
23 | 			}
24 | 
25 | 			return done(null, user)
26 | 		})
27 | 	})
28 | })
29 | 
30 | const jwtOptions = {
31 | 	jwtFromRequest: ExtractJwt.fromHeader('auth'),
32 | 	secretOrKey: 'VueJS'
33 | }
34 | 
35 | const jwtLogin = new JwtStrategy(jwtOptions, (payload, done) => {
36 | 	User.findById(payload.sub, (err, user) => {
37 | 		if (err) {
38 | 			return done(err, false)
39 | 		}
40 | 
41 | 		if (user) {
42 | 			done(null, user)
43 | 		} else {
44 | 			done(null, false)
45 | 		}
46 | 	})
47 | })
48 | 
49 | passport.use(jwtLogin)
50 | passport.use(localLogin)
51 | 


--------------------------------------------------------------------------------
/auth/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |     <router-view></router-view>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     name: 'app',
12 | 
13 |     data() {
14 |       return {
15 |         msg: 'Vuex Examples'
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 
21 | <style>
22 |   #app {
23 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
24 |     -webkit-font-smoothing: antialiased;
25 |     -moz-osx-font-smoothing: grayscale;
26 |     text-align: center;
27 |     color: #2c3e50;
28 |     margin-top: 60px;
29 |   }
30 | 
31 |   a {
32 |     color: #42b983;
33 |   }
34 | 
35 |   h1 {
36 |     font-weight: normal;
37 |   }
38 | 
39 |   h1>a {
40 |     color: inherit;
41 |     text-decoration: none;
42 |   }
43 | 
44 |   ul {
45 |     list-style-type: none;
46 |     padding: 0;
47 |   }
48 | 
49 |   li>div {
50 |     margin-top: 10px;
51 |   }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/auth/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/auth/src/assets/logo.png


--------------------------------------------------------------------------------
/auth/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import Auth from '../components/auth.vue'
 5 | import Protected from '../components/protected.vue'
 6 | import RequireAuth from '../components/require_auth'
 7 | 
 8 | Vue.use(Router)
 9 | 
10 | const router = new Router({
11 | 	mode: 'history',
12 | 	routes: [
13 | 		{ path: '/auth', component: Auth },
14 | 		{
15 | 			path: '/protected',
16 | 			component: Protected,
17 | 			beforeEnter: RequireAuth
18 | 		},
19 | 		{ path: '/*', component: Auth }
20 | 	]
21 | })
22 | 
23 | import App from './App.vue'
24 | import store from '../store'
25 | 
26 | new Vue({
27 | 	el: '#app',
28 | 	store,
29 | 	router,
30 | 	render: h => h(App)
31 | })
32 | 


--------------------------------------------------------------------------------
/auth/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import axios from 'axios'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 | 	state: {
 9 | 		authenticated: false,
10 | 		authError: null
11 | 	},
12 | 	mutations: {
13 | 		AuthUser(state) {
14 | 			state.authenticated = true
15 | 			state.authError = null
16 | 		},
17 | 		AuthError(state, e) {
18 | 			state.authError = e
19 | 		}
20 | 	},
21 | 	actions: {
22 | 		signin({ commit }, { email, password }) {
23 | 			axios
24 | 				.post('/auth/signin', {
25 | 					email,
26 | 					password
27 | 				})
28 | 				.then(res => saveToken(res.data.token, commit))
29 | 				.catch(({ response }) => {
30 | 					commit('AuthError', response.data)
31 | 				})
32 | 		},
33 | 		signup({ commit }, { email, password }) {
34 | 			axios
35 | 				.post('/auth/signup', {
36 | 					email,
37 | 					password
38 | 				})
39 | 				.then(res => saveToken(res.data.token, commit))
40 | 				.catch(({ response }) => {
41 | 					commit('AuthError', response.data)
42 | 				})
43 | 		}
44 | 	}
45 | })
46 | 
47 | function saveToken(token, cb) {
48 | 	localStorage.setItem('token', token)
49 | 
50 | 	// user is auth ^_^
51 | 	cb('AuthUser')
52 | }
53 | 


--------------------------------------------------------------------------------
/auth/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		publicPath: '/dist/',
11 | 		filename: '[name].bundle.js',
12 | 		chunkFilename: '[name].bundle.js'
13 | 	},
14 | 	optimization: {
15 | 		splitChunks: {
16 | 			chunks: 'all'
17 | 		}
18 | 	},
19 | 	mode: process.env.NODE_ENV,
20 | 	module: {
21 | 		rules: [
22 | 			{
23 | 				test: /\.vue$/,
24 | 				loader: 'vue-loader'
25 | 			},
26 | 			{
27 | 				test: /\.js$/,
28 | 				loader: 'babel-loader',
29 | 				exclude: /node_modules/
30 | 			},
31 | 			{
32 | 				test: /\.css$/,
33 | 				use: ['vue-style-loader', 'css-loader']
34 | 			},
35 | 			{
36 | 				test: /\.(png|jpg|gif|svg)$/,
37 | 				loader: 'file-loader',
38 | 				options: {
39 | 					name: '[name].[ext]?[hash]'
40 | 				}
41 | 			}
42 | 		]
43 | 	},
44 | 	resolve: {
45 | 		alias: {
46 | 			vue$: 'vue/dist/vue.esm.js'
47 | 		}
48 | 	},
49 | 	performance: {
50 | 		hints: 'warning'
51 | 	},
52 | 	plugins: [
53 | 		new VueLoaderPlugin(),
54 | 		new HtmlWebpackPlugin({
55 | 			title: 'Auth - Vuex Examples',
56 | 			template: path.join(__dirname, 'index.html')
57 | 		})
58 | 	],
59 | 	devtool: '#eval-source-map'
60 | };
61 | 
62 | if (process.env.NODE_ENV === 'production') {
63 | 	module.exports.devtool = '#source-map';
64 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
65 | 	module.exports.plugins = (module.exports.plugins || []).concat([
66 | 		new webpack.DefinePlugin({
67 | 			'process.env': {
68 | 				NODE_ENV: '"production"'
69 | 			}
70 | 		}),
71 | 		new webpack.LoaderOptionsPlugin({
72 | 			minimize: true
73 | 		})
74 | 	]);
75 | }
76 | 


--------------------------------------------------------------------------------
/counter/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/counter/README.md:
--------------------------------------------------------------------------------
1 | # Counter Example using Vuex
2 | 
3 | > A Simple Counter Implementation with Vuex
4 | 
5 | > [View App](https://vuex-counter.surge.sh)


--------------------------------------------------------------------------------
/counter/components/counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h1>{{count}}</h1>
 4 | 		<button @click="add">Add 1</button>
 5 | 		<button @click="add2">Add 2</button>
 6 | 		<button @click="subtract">Subtract 1</button>
 7 | 		<button @click="subtract(3)">Subtract 3</button>
 8 | 		<button @click="addThreeAsync">Add 3 after 3s (Async)</button>
 9 | 	</div>
10 | </template>
11 | 
12 | <script>
13 | import store from '../store'
14 | 
15 | export default {
16 | 	computed: { count: () => store.state.count },
17 | 
18 | 	methods: {
19 | 		add: () => store.commit('add'),
20 | 		add2: () => store.commit('add', 2),
21 | 		addThreeAsync: () => store.dispatch('addThreeAsync'),
22 | 		subtract: (payload) => store.commit('subtract', +payload)
23 | 	}
24 | }
25 | </script>
26 | 
27 | 


--------------------------------------------------------------------------------
/counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Counter - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/counter/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"/index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-counter.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"superstatic": "^6.0.3",
15 | 		"vue": "^2.5.17",
16 | 		"vuex": "^2.5.0"
17 | 	},
18 | 	"devDependencies": {
19 | 		"@babel/core": "^7.1.2",
20 | 		"@babel/preset-env": "^7.1.0",
21 | 		"babel-loader": "^8.0.4",
22 | 		"cross-env": "^3.0.0",
23 | 		"css-loader": "^1.0.0",
24 | 		"file-loader": "^2.0.0",
25 | 		"html-webpack-plugin": "^3.2.0",
26 | 		"vue-loader": "^15.4.2",
27 | 		"vue-style-loader": "^4.1.2",
28 | 		"vue-template-compiler": "^2.5.17",
29 | 		"webpack": "^4.20.2",
30 | 		"webpack-cli": "^3.1.2",
31 | 		"webpack-dev-server": "^3.1.9"
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/counter/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |     <counter></counter>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import counter from '../components/counter.vue'
11 | 
12 | export default {
13 |   name: 'app',
14 | 
15 |   components: {
16 |     counter
17 |   },
18 | 
19 |   data() {
20 |     return {
21 |       msg: 'Counter'
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style>
28 | #app {
29 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
30 |   -webkit-font-smoothing: antialiased;
31 |   -moz-osx-font-smoothing: grayscale;
32 |   text-align: center;
33 |   color: #2c3e50;
34 |   margin-top: 60px;
35 | }
36 | 
37 | a {
38 |   color: #42b983;
39 | }
40 | 
41 | h1 {
42 |   font-weight: normal;
43 | }
44 | 
45 | h1>a {
46 |   color: inherit;
47 |   text-decoration: none;
48 | }
49 | 
50 | ul {
51 |   list-style-type: none;
52 |   padding: 0;
53 | }
54 | 
55 | li>div {
56 |   margin-top: 10px;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/counter/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/counter/src/assets/logo.png


--------------------------------------------------------------------------------
/counter/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import App from './App.vue';
 4 | import store from '../store';
 5 | 
 6 | new Vue({
 7 | 	el: '#app',
 8 | 	store,
 9 | 	render: h => h(App)
10 | });
11 | 


--------------------------------------------------------------------------------
/counter/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 | 	state: {
 8 | 		count: 0
 9 | 	},
10 | 	mutations: {
11 | 		add(state, payload) {
12 | 			// If we get a payload, add it to count
13 | 			// Else, just add one to count
14 | 			payload ? (state.count += payload) : state.count++;
15 | 		},
16 | 		subtract(state, payload) {
17 | 			payload ? (state.count -= payload) : state.count--;
18 | 		}
19 | 	},
20 | 	actions: {
21 | 		addThreeAsync({ commit }) {
22 | 			setTimeout(() => commit('add', 3), 3000);
23 | 		}
24 | 	}
25 | });
26 | 


--------------------------------------------------------------------------------
/counter/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/firestore/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/firestore/README.md:
--------------------------------------------------------------------------------
1 | # Simple Todo
2 | 
3 | > A Simple FireStore implementation with Vuex
4 | 
5 | > [View App](https://vuex-firestore.surge.sh)
6 | 


--------------------------------------------------------------------------------
/firestore/components/simple-todo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<form @submit.prevent="addTodo(text); text = ''">
 4 | 			<input type="text"
 5 | 			       placeholder="What must be done?"
 6 | 			       v-model="text" />
 7 | 			<button> Add Todo </button>
 8 | 		</form>
 9 | 		<ul>
10 | 			<li v-for="todo in todos"
11 | 			    :key="todo.id">{{ todo.text }}
12 | 				<button @click="removeTodo(todo)">x</button>
13 | 			</li>
14 | 		</ul>
15 | 	</div>
16 | </template>
17 | 
18 | <script>
19 | 	import { mapState, mapActions } from 'vuex'
20 | 
21 | 	export default {
22 | 		data() {
23 | 			return {
24 | 				text: ''
25 | 			}
26 | 		},
27 | 		computed: mapState(['todos']),
28 | 		methods: mapActions(['addTodo', 'removeTodo'])
29 | 	}
30 | </script>
31 | 


--------------------------------------------------------------------------------
/firestore/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>FireStore - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/firestore/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"/index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-firestore.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"firebase": "^5.5.5",
15 | 		"superstatic": "^6.0.3",
16 | 		"vue": "^2.5.17",
17 | 		"vuex": "^2.5.0"
18 | 	},
19 | 	"devDependencies": {
20 | 		"@babel/core": "^7.1.2",
21 | 		"@babel/preset-env": "^7.1.0",
22 | 		"babel-loader": "^8.0.4",
23 | 		"cross-env": "^3.0.0",
24 | 		"css-loader": "^1.0.0",
25 | 		"file-loader": "^2.0.0",
26 | 		"html-webpack-plugin": "^3.2.0",
27 | 		"vue-loader": "^15.4.2",
28 | 		"vue-style-loader": "^4.1.2",
29 | 		"vue-template-compiler": "^2.5.17",
30 | 		"webpack": "^4.20.2",
31 | 		"webpack-cli": "^3.1.2",
32 | 		"webpack-dev-server": "^3.1.9"
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/firestore/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |     <simpletodo></simpletodo>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import simpletodo from '../components/simple-todo.vue'
11 | 
12 |   export default {
13 |     name: 'app',
14 | 
15 |     components: {
16 |       simpletodo
17 |     },
18 | 
19 |     data() {
20 |       return {
21 |         msg: 'Simple Fire Todo'
22 |       }
23 |     }
24 |   }
25 | </script>
26 | 
27 | <style>
28 |   #app {
29 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
30 |     -webkit-font-smoothing: antialiased;
31 |     -moz-osx-font-smoothing: grayscale;
32 |     text-align: center;
33 |     color: #2c3e50;
34 |     margin-top: 60px;
35 |   }
36 | 
37 |   a {
38 |     color: #42b983;
39 |   }
40 | 
41 |   h1 {
42 |     font-weight: normal;
43 |   }
44 | 
45 |   h1>a {
46 |     color: inherit;
47 |     text-decoration: none;
48 |   }
49 | 
50 |   ul {
51 |     list-style-type: none;
52 |     padding: 0;
53 |   }
54 | 
55 |   li>div {
56 |     margin-top: 10px;
57 |   }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/firestore/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/firestore/src/assets/logo.png


--------------------------------------------------------------------------------
/firestore/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import App from './App.vue'
 4 | import store from '../store'
 5 | 
 6 | new Vue({
 7 | 	el: '#app',
 8 | 	store,
 9 | 	render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/firestore/store/firestore.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase'
 2 | require('firebase/firestore')
 3 | import store from './'
 4 | 
 5 | firebase.initializeApp({
 6 | 	apiKey: 'ENTER_API_KEY',
 7 | 	authDomain: 'ENTER_AUTH_DOMAIN',
 8 | 	projectId: 'ENTER_PROJECT_ID'
 9 | })
10 | 
11 | const db = firebase.firestore()
12 | const todos = db.collection('todos')
13 | 
14 | // Getting Real time feeds
15 | todos.onSnapshot(querySnapshot => {
16 | 	const myTodos = []
17 | 	querySnapshot.forEach(doc => {
18 | 		myTodos.push({ id: doc.id, ...doc.data() })
19 | 	})
20 | 	store.commit('watchTodos', myTodos)
21 | })
22 | 
23 | export default {
24 | 	fetchTodos: () => {
25 | 		return todos.get()
26 | 	},
27 | 
28 | 	addTodo: text => {
29 | 		return todos.add({ text })
30 | 	},
31 | 
32 | 	removeTodo: id => {
33 | 		return todos.doc(id).delete()
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/firestore/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | import firestore from './firestore';
 4 | 
 5 | Vue.use(Vuex);
 6 | 
 7 | export default new Vuex.Store({
 8 | 	state: {
 9 | 		todos: []
10 | 	},
11 | 	mutations: {
12 | 		watchTodos(state, todos) {
13 | 			state.todos = todos;
14 | 		},
15 | 		removeTodo(state, todo) {
16 | 			state.todos.splice(state.todos.indexOf(todo), 1);
17 | 		}
18 | 	},
19 | 	actions: {
20 | 		addTodo({ commit }, text) {
21 | 			firestore.addTodo(text);
22 | 		},
23 | 		removeTodo({ commit }, todo) {
24 | 			firestore.removeTodo(todo.id);
25 | 			commit('removeTodo', todo);
26 | 		}
27 | 	}
28 | });
29 | 


--------------------------------------------------------------------------------
/firestore/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/gallery/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/gallery/README.md:
--------------------------------------------------------------------------------
1 | # Image Gallery
2 | 
3 | > An Image Gallery implementation with Vuex
4 | 
5 | > [Server](https://github.com/ooade/vuex-examples-server)
6 | 
7 | > [View App](https://vuex-gallery.surge.sh)
8 | 


--------------------------------------------------------------------------------
/gallery/components/image-form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<form enctype="multipart/form-data"
 4 | 		      @submit.prevent="uploadImages">
 5 | 			<input id="file"
 6 | 			       multiple
 7 | 			       type="file"
 8 | 			       accept="image/*"
 9 | 			       @change="tempSaveImages" />
10 | 			<button> Add Image</button>
11 | 			<br/><br/>
12 | 			<div v-show="loading">
13 | 				loading..... <br/>
14 | 				<img src="https://res.cloudinary.com/stackpie/image/upload/v1506528808/831_m5ttna.gif" />
15 | 			</div>
16 | 		</form>
17 | 	</div>
18 | </template>
19 | 
20 | <script>
21 | 	import { mapActions, mapMutations, mapState } from 'vuex';
22 | 
23 | 	export default {
24 | 		computed: mapState(['loading']),
25 | 		methods: { ...mapActions(['uploadImages']), ...mapMutations(['tempSaveImages']) }
26 | 	}
27 | </script>
28 | 


--------------------------------------------------------------------------------
/gallery/components/images.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ul>
 3 | 		<li v-for="image in images"
 4 | 		    :key="image._id">
 5 | 			<vue-image :src="image.image_url"/>
 6 | 			<button @click="removeImage(image)">Delete</button>
 7 | 		</li>
 8 | 	</ul>
 9 | </template>
10 | 
11 | <script>
12 | 	import { mapState, mapMutations, mapActions } from 'vuex'
13 | 
14 | 	export default {
15 | 		mounted() {
16 | 			this.fetchImages()
17 | 		},
18 | 		computed: mapState(['images']),
19 | 		methods: { ...mapActions(['fetchImages']), ...mapMutations(['removeImage']) }
20 | 	}
21 | </script>
22 | 
23 | <style>
24 | 	ul {
25 | 		list-style: none;
26 | 		display: flex;
27 | 		flex-wrap: wrap;
28 | 		max-width: 100vw;
29 | 	}
30 | 
31 | 	li img {
32 | 		display: flex;
33 | 		border: 2px solid #bada55;
34 | 		flex: 1;
35 | 		justify-content: space-around;
36 | 		margin: 10px;
37 | 	}
38 | 
39 | 	button {
40 | 		border: none;
41 | 		cursor: pointer;
42 | 		padding: 5px 10px;
43 | 	}
44 | 
45 | 	li button {
46 | 		background-color: crimson;
47 | 		color: #fff;
48 | 		padding: 10px 20px;
49 | 	}
50 | 
51 | 	li button:hover {
52 | 		background-color: red;
53 | 	}
54 | 
55 | 	.pimg {
56 | 		width: 250px;
57 | 		height: auto;
58 | 	}
59 | 
60 | 	.pimg__placeholder {
61 | 		filter: blur(2vw);
62 | 		transform: scale(1.05);
63 | 	}
64 | </style>
65 | 
66 | 


--------------------------------------------------------------------------------
/gallery/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Gallery - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/gallery/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"/index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-gallery.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"axios": "^0.16.2",
15 | 		"pimg": "^1.0.0",
16 | 		"superstatic": "^6.0.3",
17 | 		"vue": "^2.5.17",
18 | 		"vue-router": "^2.7.0",
19 | 		"vuex": "^2.5.0"
20 | 	},
21 | 	"devDependencies": {
22 | 		"@babel/core": "^7.1.2",
23 | 		"@babel/preset-env": "^7.1.0",
24 | 		"babel-loader": "^8.0.4",
25 | 		"cross-env": "^3.0.0",
26 | 		"css-loader": "^1.0.0",
27 | 		"file-loader": "^2.0.0",
28 | 		"html-webpack-plugin": "^3.2.0",
29 | 		"vue-loader": "^15.4.2",
30 | 		"vue-style-loader": "^4.1.2",
31 | 		"vue-template-compiler": "^2.5.17",
32 | 		"webpack": "^4.20.2",
33 | 		"webpack-cli": "^3.1.2",
34 | 		"webpack-dev-server": "^3.1.9"
35 | 	}
36 | }
37 | 


--------------------------------------------------------------------------------
/gallery/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>
 5 |       {{ msg }}
 6 |     </h1>
 7 |     <image-form></image-form>
 8 |     <images></images>
 9 |     <div class="credit">Lazy loading was done with <a href="https://github.com/ooade/pimg">PIMG</a></div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   import ImageForm from '../components/image-form.vue'
15 |   import Images from '../components/images.vue'
16 | 
17 |   export default {
18 |     name: 'app',
19 | 
20 |     components: {
21 |       ImageForm,
22 |       Images
23 |     },
24 | 
25 |     data() {
26 |       return {
27 |         msg: 'Image Gallery'
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 
33 | <style>
34 | #app {
35 | 	transition: all 0.5s;
36 | 	font-family: 'Avenir', Helvetica, Arial, sans-serif;
37 | 	-webkit-font-smoothing: antialiased;
38 | 	-moz-osx-font-smoothing: grayscale;
39 | 	text-align: center;
40 | 	color: #2c3e50;
41 | 	margin-top: 60px;
42 | }
43 | 
44 | .credit {
45 | 	padding: 2rem;
46 | }
47 | 
48 | .credit > a {
49 | 	font-size: inherit;
50 | 	display: initial;
51 | 	margin: initial;
52 | }
53 | 
54 | a {
55 | 	color: #42b983;
56 | }
57 | 
58 | h1,
59 | h2 {
60 | 	font-weight: normal;
61 | }
62 | 
63 | div > a {
64 | 	display: block;
65 | 	font-size: 20px;
66 | 	margin: 10px;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/gallery/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/gallery/src/assets/logo.png


--------------------------------------------------------------------------------
/gallery/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueImage from 'pimg/dist/vue';
 3 | 
 4 | import App from './App.vue';
 5 | import store from '../store';
 6 | 
 7 | Vue.component('vue-image', VueImage);
 8 | 
 9 | new Vue({
10 | 	el: '#app',
11 | 	store,
12 | 	render: h => h(App)
13 | });
14 | 


--------------------------------------------------------------------------------
/gallery/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import axios from 'axios'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | const URL = 'https://vuex-server.herokuapp.com'
 8 | 
 9 | export default new Vuex.Store({
10 | 	state: {
11 | 		loading: false,
12 | 		temp_images: [],
13 | 		images: []
14 | 	},
15 | 	mutations: {
16 | 		tempSaveImages(state, e) {
17 | 			const images = Array.from(e.target.files)
18 | 			state.temp_images.unshift(...images)
19 | 		},
20 | 		addImage(state, payload) {
21 | 			state.images.unshift(payload)
22 | 		},
23 | 		removeImage(state, payload) {
24 | 			state.images.splice(
25 | 				state.images.findIndex(image => image._id === payload._id),
26 | 				1
27 | 			)
28 | 			axios.delete(`${URL}/api/images`, {
29 | 				data: payload
30 | 			})
31 | 		},
32 | 		toggleLoading(state) {
33 | 			state.loading = !state.loading
34 | 		}
35 | 	},
36 | 	actions: {
37 | 		fetchImages({ state, commit }) {
38 | 			commit('toggleLoading')
39 | 			axios.get(`${URL}/api/images`).then(res => {
40 | 				commit('toggleLoading')
41 | 				state.images = res.data
42 | 			})
43 | 		},
44 | 		uploadImages({ state, commit }, e) {
45 | 			commit('toggleLoading')
46 | 			state.temp_images.map(image => {
47 | 				const data = new FormData()
48 | 				data.append('file', image)
49 | 				axios.post(`${URL}/api/images`, data).then(res => {
50 | 					commit('toggleLoading')
51 | 					e.target.reset()
52 | 					state.temp_images = []
53 | 					commit('addImage', res.data)
54 | 				})
55 | 			})
56 | 		}
57 | 	}
58 | })
59 | 


--------------------------------------------------------------------------------
/gallery/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/shopping-cart/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/shopping-cart/README.md:
--------------------------------------------------------------------------------
1 | # Shopping Cart
2 | 
3 | > A Shopping Cart implementation with Vuex
4 | 
5 | > [View App](https://vuex-shopping-cart.surge.sh)
6 | 


--------------------------------------------------------------------------------
/shopping-cart/components/cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h2>Cart</h2>
 4 | 		<ul>
 5 | 			<li
 6 | 			  v-for="item in cart"
 7 | 			  :key="item.id"
 8 | 			>
 9 | 				<span class="item-name">{{ item.name }}
10 | 					<button @click="deductItemCount(item)">-1</button>
11 | 					<button @click="removeItem(item)">x</button>
12 | 				</span>
13 | 				<span class="item-count"> x {{ item.count }}</span>
14 | 				<span class="item-amount"> = {{ formatCurrency(item.price * item.count) }}</span>
15 | 				</li>
16 | 		</ul>
17 | 		<div v-if="cart.length === 0">
18 | 			<h2> No item :( </h2>
19 | 		</div>
20 | 		<div v-else>
21 | 			<div class="total-amount">Total: {{formatCurrency(totalAmount)}}</div>
22 | 			<button @click="clearCart"> Clear All </button>
23 | 			<button> Checkout </button>
24 | 		</div>
25 | 	</div>
26 | </template>
27 | 
28 | <script>
29 | import { mapGetters, mapState, mapMutations } from 'vuex';
30 | 
31 | export default {
32 | 	computed: {
33 | 		...mapState(['cart']),
34 | 		...mapGetters(['totalAmount'])
35 | 	},
36 | 	methods: {
37 | 		formatCurrency(price) {
38 | 			return '$' + price.toFixed(2)
39 | 		},
40 | 		...mapMutations([
41 | 			'deductItemCount',
42 | 			'removeItem',
43 | 			'clearCart'
44 | 		])
45 | 	}
46 | }
47 | </script>
48 | 
49 | <style>
50 | 	ul {
51 | 		list-style: none;
52 | 	}
53 | 
54 | 	li {
55 | 		display: flex;
56 | 		max-width: 700px;
57 | 		margin: auto;
58 | 		margin-top: 10px;
59 | 	}
60 | 
61 | 	.item-name {
62 | 		text-align: left;
63 | 		font-size: 18px;
64 | 		flex: 2;
65 | 	}
66 | 
67 | 	.item-count {
68 | 		font-size: 25px;
69 | 		margin-left: 10px;
70 | 		flex: 2;
71 | 	}
72 | 
73 | 	.item-amount {
74 | 		text-align: left;
75 | 		flex: 1;
76 | 	}
77 | 
78 | 	.total-amount {
79 | 		border-top: 2px solid #333;
80 | 		border-bottom: 2px solid #333;
81 | 		padding: 10px 20% 10px 10px;
82 | 		margin: 10px;
83 | 		font-size: 29px;
84 | 		text-align: right;
85 | 	}
86 | 
87 | 	button {
88 | 		border: none;
89 | 		cursor: pointer;
90 | 		padding: 5px 10px;
91 | 	}
92 | </style>
93 | 
94 | 


--------------------------------------------------------------------------------
/shopping-cart/components/products.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="products">
 3 | 		<span v-if="products.length === 0">Fetching Products....</span>
 4 | 		<h2 v-else>Products</h2>
 5 | 		<div
 6 | 		  class="notification"
 7 | 		  v-for="(info, key) in infos"
 8 | 		  :key="(key)"
 9 | 		>{{ info }}</div>
10 | 	<table :class="{ products: products.length !== 0 }">
11 | 		<tr v-show="products.length !== 0">
12 | 			<th> Product Name </th>
13 | 			<th> Price </th>
14 | 			<th> Buy </th>
15 | 		</tr>
16 | 		<tr
17 | 		  v-for="product in products"
18 | 		  :key="product.id"
19 | 		>
20 | 			<td> {{ product.name }} x {{ product.remaining }} </td>
21 | 			<td> {{ product.price }} </td>
22 | 			<td>
23 | 				<button @click="addToCart(product)"> Add to Cart </button>
24 | 			</td>
25 | 			</tr>
26 | 	</table>
27 | 	</div>
28 | </template>
29 | 
30 | <script>
31 | import { mapActions, mapState } from 'vuex'
32 | 
33 | export default {
34 | 	data() {
35 | 		return {
36 | 			infos: []
37 | 		}
38 | 	},
39 | 	mounted() {
40 | 		this.fetchProducts();
41 | 	},
42 | 	computed: mapState(['products']),
43 | 	methods: {
44 | 		...mapActions(['fetchProducts']),
45 | 
46 | 		addToCart(product) {
47 | 			this.$store.commit('addToCart', product)
48 | 			const info = product.name + ' added to cart'
49 | 			this.infos.push(info)
50 | 			setTimeout(() => this.infos.splice(this.infos.indexOf(info), 1), 3000)
51 | 		}
52 | 	}
53 | }
54 | </script>
55 | 
56 | <style>
57 | 	.products {
58 | 		border: 1px solid #ddd;
59 | 		margin: auto;
60 | 	}
61 | 
62 | 	.products td,
63 | 	th {
64 | 		border: 1px solid #ddd;
65 | 		padding: 10px;
66 | 	}
67 | 
68 | 	.notification {
69 | 		position: fixed;
70 | 		background-color: #ddd;
71 | 		padding: 20px;
72 | 		width: 200px;
73 | 		top: 20vh;
74 | 		right: 10vh;
75 | 	}
76 | 
77 | 	button {
78 | 		border: none;
79 | 		cursor: pointer;
80 | 		padding: 5px 10px;
81 | 	}
82 | </style>
83 | 


--------------------------------------------------------------------------------
/shopping-cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Shopping Cart - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/shopping-cart/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-shopping-cart.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"superstatic": "^6.0.3",
15 | 		"vue": "^2.5.17",
16 | 		"vue-router": "^2.7.0",
17 | 		"vuex": "^2.5.0"
18 | 	},
19 | 	"devDependencies": {
20 | 		"@babel/core": "^7.1.2",
21 | 		"@babel/preset-env": "^7.1.0",
22 | 		"babel-loader": "^8.0.4",
23 | 		"cross-env": "^3.0.0",
24 | 		"css-loader": "^1.0.0",
25 | 		"file-loader": "^2.0.0",
26 | 		"html-webpack-plugin": "^3.2.0",
27 | 		"vue-loader": "^15.4.2",
28 | 		"vue-style-loader": "^4.1.2",
29 | 		"vue-template-compiler": "^2.5.17",
30 | 		"webpack": "^4.20.2",
31 | 		"webpack-cli": "^3.1.2",
32 | 		"webpack-dev-server": "^3.1.9"
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/shopping-cart/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-link to="/"><img src="./assets/logo.png"></router-link>
 4 |     <h1>
 5 |       {{ msg }}
 6 |     </h1>
 7 |     <router-link to="/products"> products </router-link>
 8 |     <router-link to="/cart"> cart </router-link>
 9 |     <router-view></router-view>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import products from '../components/products.vue'
15 | import cart from '../components/cart.vue'
16 | 
17 | export default {
18 |   name: 'app',
19 | 
20 |   components: {
21 |     products,
22 |     cart
23 |   },
24 | 
25 |   data() {
26 |     return {
27 |       msg: 'Shopping Cart'
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style>
34 |   #app {
35 |     transition: all 0.5s;
36 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
37 |     -webkit-font-smoothing: antialiased;
38 |     -moz-osx-font-smoothing: grayscale;
39 |     text-align: center;
40 |     color: #2c3e50;
41 |     margin-top: 60px;
42 |   }
43 | 
44 |   a {
45 |     color: #42b983;
46 |   }
47 | 
48 |   h1,
49 |   h2 {
50 |     font-weight: normal;
51 |   }
52 | 
53 |   div>a {
54 |     display: block;
55 |     font-size: 20px;
56 |     margin: 10px;
57 |   }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/shopping-cart/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/shopping-cart/src/assets/logo.png


--------------------------------------------------------------------------------
/shopping-cart/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import App from './App.vue'
 4 | import store from '../store'
 5 | import router from './router'
 6 | 
 7 | new Vue({
 8 | 	el: '#app',
 9 | 	store,
10 | 	router,
11 | 	render: h => h(App)
12 | })
13 | 


--------------------------------------------------------------------------------
/shopping-cart/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | // get components
 7 | import products from '../components/products.vue'
 8 | import cart from '../components/cart.vue'
 9 | 
10 | // initialize router with the respective routes
11 | export default new Router({
12 | 	mode: 'history',
13 | 	routes: [
14 | 		{
15 | 			component: products,
16 | 			path: '/products'
17 | 		},
18 | 		{
19 | 			component: cart,
20 | 			path: '/cart'
21 | 		}
22 | 	]
23 | })
24 | 


--------------------------------------------------------------------------------
/shopping-cart/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const URI = 'https://c0rs.herokuapp.com/https://www.datakick.org/api/items'
 7 | 
 8 | export default new Vuex.Store({
 9 | 	state: {
10 | 		cart: [],
11 | 		products: []
12 | 	},
13 | 	mutations: {
14 | 		addProduct({ products }, product) {
15 | 			products.push(product)
16 | 		},
17 | 		addToCart({ cart, products }, product) {
18 | 			const itemIndex = cart.findIndex(item => item.id === product.id)
19 | 
20 | 			if (itemIndex === -1) {
21 | 				cart.push({ ...product, count: 1 })
22 | 			} else {
23 | 				cart[itemIndex].count++
24 | 			}
25 | 
26 | 			product.remaining > 1
27 | 				? product.remaining--
28 | 				: products.splice(products.indexOf(product), 1)
29 | 		},
30 | 		deductItemCount({ cart }, product) {
31 | 			const itemIndex = cart.findIndex(item => item.id === product.id)
32 | 
33 | 			cart[itemIndex].count > 1
34 | 				? cart[itemIndex].count--
35 | 				: cart.splice(itemIndex, 1)
36 | 		},
37 | 		removeItem({ cart }, product) {
38 | 			const itemIndex = cart.findIndex(item => item.id === product.id)
39 | 
40 | 			cart.splice(itemIndex, 1)
41 | 		},
42 | 		clearCart(state) {
43 | 			state.cart = []
44 | 		}
45 | 	},
46 | 	actions: {
47 | 		fetchProducts({ commit, getters }) {
48 | 			fetch(URI)
49 | 				.then(res => res.json())
50 | 				.then(data => {
51 | 					// Get the last 50 products
52 | 					const products = data.slice(50)
53 | 
54 | 					products.forEach(product => {
55 | 						// Commit only non-existing products with a size
56 | 						if (
57 | 							!getters.brandNames.includes(product.brand_name) &&
58 | 							product.size
59 | 						) {
60 | 							commit('addProduct', {
61 | 								brand_name: product.brand_name,
62 | 								name: product.name,
63 | 								id: product.gtin14,
64 | 								remaining: 10,
65 | 								price:
66 | 									Math.floor(parseInt(product.size) * 5 / Math.random()) * 10
67 | 							})
68 | 						}
69 | 					})
70 | 				})
71 | 		}
72 | 	},
73 | 	getters: {
74 | 		brandNames: state => state.products.map(product => product.brand_name),
75 | 
76 | 		totalAmount: state => {
77 | 			let amount = 0
78 | 
79 | 			state.cart.forEach(item => (amount += item.price * item.count))
80 | 
81 | 			return amount
82 | 		}
83 | 	}
84 | })
85 | 


--------------------------------------------------------------------------------
/shopping-cart/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/simple-todo/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/simple-todo/README.md:
--------------------------------------------------------------------------------
1 | # Simple Todo
2 | 
3 | > A Simple Todo implementation with Vuex
4 | 
5 | > [View App](https://vuex-simple-todo.surge.sh)
6 | 


--------------------------------------------------------------------------------
/simple-todo/components/simple-todo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<form @submit.prevent="addTodo">
 4 | 			<input
 5 | 			  type="text"
 6 | 			  placeholder="What must be done?"
 7 | 			  v-model="text"
 8 | 			/>
 9 | 			<button> Add Todo </button>
10 | 		</form>
11 | 		<ul>
12 | 			<li
13 | 			  v-for="(todo, index) in todos"
14 | 			  :key="index"
15 | 			>{{ todo.text }}
16 | 				<button @click="removeTodo(todo)">x</button>
17 | 				</li>
18 | 		</ul>
19 | 	</div>
20 | </template>
21 | 
22 | <script>
23 | import store from '../store';
24 | 
25 | export default {
26 | 	data() {
27 | 		return {
28 | 			text: ''
29 | 		}
30 | 	},
31 | 
32 | 	computed: { todos: () => store.state.todos },
33 | 
34 | 	methods: {
35 | 		addTodo() {
36 | 			store.commit('addTodo', this.text)
37 | 			this.text = ''
38 | 		},
39 | 		removeTodo(id) {
40 | 			store.commit('removeTodo', id)
41 | 		}
42 | 	}
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/simple-todo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Simple Todo - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/simple-todo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-simple-todo.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"superstatic": "^6.0.3",
15 | 		"vue": "^2.5.17",
16 | 		"vuex": "^2.5.0"
17 | 	},
18 | 	"devDependencies": {
19 | 		"@babel/core": "^7.1.2",
20 | 		"@babel/preset-env": "^7.1.0",
21 | 		"babel-loader": "^8.0.4",
22 | 		"cross-env": "^3.0.0",
23 | 		"css-loader": "^1.0.0",
24 | 		"file-loader": "^2.0.0",
25 | 		"html-webpack-plugin": "^3.2.0",
26 | 		"vue-loader": "^15.4.2",
27 | 		"vue-style-loader": "^4.1.2",
28 | 		"vue-template-compiler": "^2.5.17",
29 | 		"webpack": "^4.20.2",
30 | 		"webpack-cli": "^3.1.2",
31 | 		"webpack-dev-server": "^3.1.9"
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/simple-todo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |     <simpletodo></simpletodo>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import simpletodo from '../components/simple-todo.vue'
11 | 
12 | export default {
13 |   name: 'app',
14 | 
15 |   components: {
16 |     simpletodo
17 |   },
18 | 
19 |   data() {
20 |     return {
21 |       msg: 'Simple Todo'
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style>
28 | #app {
29 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
30 |   -webkit-font-smoothing: antialiased;
31 |   -moz-osx-font-smoothing: grayscale;
32 |   text-align: center;
33 |   color: #2c3e50;
34 |   margin-top: 60px;
35 | }
36 | 
37 | a {
38 |   color: #42b983;
39 | }
40 | 
41 | h1 {
42 |   font-weight: normal;
43 | }
44 | 
45 | h1>a {
46 |   color: inherit;
47 |   text-decoration: none;
48 | }
49 | 
50 | ul {
51 |   list-style-type: none;
52 |   padding: 0;
53 | }
54 | 
55 | li>div {
56 |   margin-top: 10px;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/simple-todo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/simple-todo/src/assets/logo.png


--------------------------------------------------------------------------------
/simple-todo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import App from './App.vue'
 4 | import store from '../store'
 5 | 
 6 | new Vue({
 7 | 	el: '#app',
 8 | 	store,
 9 | 	render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/simple-todo/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 | 	state: {
 8 | 		todos: []
 9 | 	},
10 | 	mutations: {
11 | 		addTodo(state, text) {
12 | 			state.todos.push({ text })
13 | 		},
14 | 		removeTodo(state, todo) {
15 | 			state.todos.splice(state.todos.indexOf(todo), 1)
16 | 		}
17 | 	}
18 | })
19 | 


--------------------------------------------------------------------------------
/simple-todo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/starter-files/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/starter-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/starter-files/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10 | 	},
11 | 	"dependencies": {
12 | 		"vue": "^2.5.17",
13 | 		"vuex": "^2.5.0"
14 | 	},
15 | 	"devDependencies": {
16 | 		"@babel/core": "^7.1.2",
17 | 		"@babel/preset-env": "^7.1.0",
18 | 		"babel-loader": "^8.0.4",
19 | 		"cross-env": "^3.0.0",
20 | 		"css-loader": "^1.0.0",
21 | 		"file-loader": "^2.0.0",
22 | 		"html-webpack-plugin": "^3.2.0",
23 | 		"vue-loader": "^15.4.2",
24 | 		"vue-style-loader": "^4.1.2",
25 | 		"vue-template-compiler": "^2.5.17",
26 | 		"webpack": "^4.20.2",
27 | 		"webpack-cli": "^3.1.2",
28 | 		"webpack-dev-server": "^3.1.9"
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/starter-files/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app',
11 | 
12 |   components: {
13 |     //
14 |   },
15 | 
16 |   data() {
17 |     return {
18 |       msg: 'Vuex Examples Starter'
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | #app {
26 | 	font-family: 'Avenir', Helvetica, Arial, sans-serif;
27 | 	-webkit-font-smoothing: antialiased;
28 | 	-moz-osx-font-smoothing: grayscale;
29 | 	text-align: center;
30 | 	color: #2c3e50;
31 | 	margin-top: 60px;
32 | }
33 | 
34 | a {
35 | 	color: #42b983;
36 | }
37 | 
38 | h1 {
39 | 	font-weight: normal;
40 | }
41 | 
42 | h1 > a {
43 | 	color: inherit;
44 | 	text-decoration: none;
45 | }
46 | 
47 | ul {
48 | 	list-style-type: none;
49 | 	padding: 0;
50 | }
51 | 
52 | li > div {
53 | 	margin-top: 10px;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/starter-files/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/starter-files/src/assets/logo.png


--------------------------------------------------------------------------------
/starter-files/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import App from './App.vue'
 4 | import store from '../store'
 5 | 
 6 | new Vue({
 7 | 	el: '#app',
 8 | 	store,
 9 | 	render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/starter-files/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 | 	state: {
 8 | 		//
 9 | 	},
10 | 	mutations: {
11 | 		//
12 | 	},
13 | 	actions: {
14 | 		//
15 | 	}
16 | })
17 | 


--------------------------------------------------------------------------------
/starter-files/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------
/todo/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"modules": false
 7 | 			}
 8 | 		]
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/todo/README.md:
--------------------------------------------------------------------------------
1 | # Todo
2 | 
3 | > A todo app implementation with Vuex
4 | 


--------------------------------------------------------------------------------
/todo/components/todo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="todo">
 3 | 		<form @submit.prevent="addTodo(text); text=''">
 4 | 			<input
 5 | 			  type="checkbox"
 6 | 			  title="mark all"
 7 | 			  @change="markAllTodo(!markAll); markAll = !markAll"
 8 | 			/>
 9 | 			<input
10 | 			  type="text"
11 | 			  placeholder="What must be done?"
12 | 			  v-model="text"
13 | 			/>
14 | 			<button> Add Todo </button>
15 | 		</form>
16 | 		<ul>
17 | 			<li
18 | 			  v-for="(todo, index) in todos"
19 | 			  :key="index"
20 | 			>
21 | 				<input
22 | 				  type="checkbox"
23 | 				  title="mark todo"
24 | 				  @change="markTodo(todo)"
25 | 				  :checked="todo.completed"
26 | 				/>
27 | 				<span :class="{completed: todo.completed}">{{ todo.text }}</span>
28 | 				<button @click="removeTodo(todo)">x</button>
29 | 				</li>
30 | 		</ul>
31 | 		<div>
32 | 			<a
33 | 			  href="#"
34 | 			  @click="clearCompleted"
35 | 			> clear completed </a>
36 | 		</div>
37 | 		show:
38 | 		<button @click="visible = 'all'"> all </button>
39 | 		<button @click="visible = 'completed'"> completed </button>
40 | 		<button @click="visible = 'pending'"> pending </button>
41 | 	</div>
42 | </template>
43 | 
44 | <script>
45 | import { mapGetters, mapMutations } from 'vuex';
46 | 
47 | export default {
48 | 	data() {
49 | 		return {
50 | 			text: '',
51 | 			visible: 'all',
52 | 			markAll: false
53 | 		}
54 | 	},
55 | 
56 | 	computed: {
57 | 		todos() {
58 | 			return this.$store.getters[this.visible]
59 | 		},
60 | 		...mapGetters(['pending', 'completed', 'all'])
61 | 	},
62 | 
63 | 	methods: mapMutations([
64 | 		'addTodo',
65 | 		'removeTodo',
66 | 		'markTodo',
67 | 		'markAllTodo',
68 | 		'clearCompleted'
69 | 	])
70 | }
71 | </script>
72 | 
73 | <style>
74 | 	.todo {
75 | 		text-align: left;
76 | 		padding: 5px;
77 | 		margin: auto;
78 | 		transition: all 0.5s;
79 | 		max-width: 300px;
80 | 	}
81 | 
82 | 	.completed {
83 | 		color: #888;
84 | 		text-decoration: line-through;
85 | 	}
86 | 
87 | 	li {
88 | 		display: flex;
89 | 		flex-wrap: wrap;
90 | 	}
91 | 
92 | 	li>span {
93 | 		flex: 1;
94 | 		max-width: 250px;
95 | 	}
96 | </style>
97 | 


--------------------------------------------------------------------------------
/todo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Todo - Vuex Examples</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/todo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuex-examples",
 3 | 	"description": "A Vue.js project",
 4 | 	"version": "1.0.0",
 5 | 	"author": "Ademola Adegbuyi <ooade96@gmail.com>",
 6 | 	"private": true,
 7 | 	"scripts": {
 8 | 		"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 | 		"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 | 		"start": "superstatic /dist -p 3000 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
11 | 		"push-surge": "npm run -s build && surge ./ -d vuex-todo.surge.sh"
12 | 	},
13 | 	"dependencies": {
14 | 		"superstatic": "^6.0.3",
15 | 		"vue": "^2.5.17",
16 | 		"vuex": "^2.5.0"
17 | 	},
18 | 	"devDependencies": {
19 | 		"@babel/core": "^7.1.2",
20 | 		"@babel/preset-env": "^7.1.0",
21 | 		"babel-loader": "^8.0.4",
22 | 		"cross-env": "^3.0.0",
23 | 		"css-loader": "^1.0.0",
24 | 		"file-loader": "^2.0.0",
25 | 		"html-webpack-plugin": "^3.2.0",
26 | 		"vue-loader": "^15.4.2",
27 | 		"vue-style-loader": "^4.1.2",
28 | 		"vue-template-compiler": "^2.5.17",
29 | 		"webpack": "^4.20.2",
30 | 		"webpack-cli": "^3.1.2",
31 | 		"webpack-dev-server": "^3.1.9"
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/todo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <h1>{{ msg }}</h1>
 5 |     <todo></todo>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import todo from '../components/todo.vue'
11 | 
12 | export default {
13 |   name: 'app',
14 | 
15 |   components: {
16 |     todo
17 |   },
18 | 
19 |   data() {
20 |     return {
21 |       msg: 'Todo'
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style>
28 | #app {
29 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
30 |   -webkit-font-smoothing: antialiased;
31 |   -moz-osx-font-smoothing: grayscale;
32 |   text-align: center;
33 |   color: #2c3e50;
34 |   margin-top: 60px;
35 | }
36 | 
37 | a {
38 |   color: #42b983;
39 | }
40 | 
41 | h1 {
42 |   font-weight: normal;
43 | }
44 | 
45 | h1>a {
46 |   color: inherit;
47 |   text-decoration: none;
48 | }
49 | 
50 | ul {
51 |   list-style-type: none;
52 |   padding: 0;
53 | }
54 | 
55 | li>div {
56 |   margin-top: 10px;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/todo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ooade/vuex-examples/906af29fff752a8ab800f2a97ddcb5df0b95022b/todo/src/assets/logo.png


--------------------------------------------------------------------------------
/todo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import App from './App.vue'
 4 | import store from '../store'
 5 | 
 6 | new Vue({
 7 | 	el: '#app',
 8 | 	store,
 9 | 	render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/todo/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 | 	state: {
 8 | 		todos: []
 9 | 	},
10 | 	mutations: {
11 | 		addTodo({ todos }, text) {
12 | 			todos.push({
13 | 				text,
14 | 				completed: false
15 | 			})
16 | 		},
17 | 		removeTodo: ({ todos }, todo) => {
18 | 			todos.splice(todos.indexOf(todo), 1)
19 | 		},
20 | 		markTodo({ todos }, todo) {
21 | 			todos[todos.indexOf(todo)].completed = !todo.completed
22 | 		},
23 | 		markAllTodo({ todos }, completed) {
24 | 			todos.forEach(todo => (todo.completed = completed))
25 | 		},
26 | 		clearCompleted({ todos }) {
27 | 			todos.map(
28 | 				todo => (todo.completed ? todos.splice(todos.indexOf(todo), 1) : null)
29 | 			)
30 | 		}
31 | 	},
32 | 	getters: {
33 | 		all: state => state.todos,
34 | 		completed: state => state.todos.filter(todo => todo.completed),
35 | 		pending: state => state.todos.filter(todo => !todo.completed)
36 | 	}
37 | })
38 | 


--------------------------------------------------------------------------------
/todo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const webpack = require('webpack');
 5 | 
 6 | module.exports = {
 7 | 	entry: './src/main.js',
 8 | 	output: {
 9 | 		path: path.resolve(__dirname, './dist'),
10 | 		filename: '[name].bundle.js',
11 | 		chunkFilename: '[name].bundle.js'
12 | 	},
13 | 	optimization: {
14 | 		splitChunks: {
15 | 			chunks: 'all'
16 | 		}
17 | 	},
18 | 	mode: process.env.NODE_ENV,
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.vue$/,
23 | 				loader: 'vue-loader'
24 | 			},
25 | 			{
26 | 				test: /\.js$/,
27 | 				loader: 'babel-loader',
28 | 				exclude: /node_modules/
29 | 			},
30 | 			{
31 | 				test: /\.css$/,
32 | 				use: ['vue-style-loader', 'css-loader']
33 | 			},
34 | 			{
35 | 				test: /\.(png|jpg|gif|svg)$/,
36 | 				loader: 'file-loader',
37 | 				options: {
38 | 					name: '[name].[ext]?[hash]'
39 | 				}
40 | 			}
41 | 		]
42 | 	},
43 | 	resolve: {
44 | 		alias: {
45 | 			vue$: 'vue/dist/vue.esm.js'
46 | 		}
47 | 	},
48 | 	devServer: {
49 | 		historyApiFallback: true,
50 | 		noInfo: true,
51 | 		hot: true
52 | 	},
53 | 	performance: {
54 | 		hints: 'warning'
55 | 	},
56 | 	plugins: [
57 | 		new VueLoaderPlugin(),
58 | 		new HtmlWebpackPlugin({
59 | 			template: path.join(__dirname, 'index.html')
60 | 		})
61 | 	],
62 | 	devtool: '#eval-source-map'
63 | };
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 | 	module.exports.devtool = '#source-map';
67 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
68 | 	module.exports.plugins = (module.exports.plugins || []).concat([
69 | 		new webpack.DefinePlugin({
70 | 			'process.env': {
71 | 				NODE_ENV: '"production"'
72 | 			}
73 | 		}),
74 | 		new webpack.LoaderOptionsPlugin({
75 | 			minimize: true
76 | 		})
77 | 	]);
78 | }
79 | 


--------------------------------------------------------------------------------