├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── ProductListOne.vue │ └── ProductListTwo.vue ├── main.js └── store │ └── store.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | ["stage-2"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuex-playlist 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex-playlist 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuex-playlist", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "iamshaunjp ", 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.3.3", 13 | "vuex": "^2.3.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-env": "^1.5.1", 19 | "babel-preset-stage-2": "^6.24.1", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^12.1.0", 24 | "vue-template-compiler": "^2.3.3", 25 | "webpack": "^2.6.1", 26 | "webpack-dev-server": "^2.4.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 27 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/vuex-playlist/a3e24cb609a19aa80b9f328176db72e5412472a7/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/ProductListOne.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | 57 | -------------------------------------------------------------------------------- /src/components/ProductListTwo.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 25 | 26 | 49 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import { store } from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store: store, 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | export const store = new Vuex.Store({ 7 | strict: true, 8 | state: { 9 | products: [ 10 | {name: 'Banana Skin', price: 20}, 11 | {name: 'Shiny Star', price: 40}, 12 | {name: 'Green Shells', price: 60}, 13 | {name: 'Red Shells', price: 80} 14 | ] 15 | }, 16 | getters: { 17 | saleProducts: (state) => { 18 | var saleProducts = state.products.map( product => { 19 | return { 20 | name: '**' + product.name + '**', 21 | price: product.price / 2, 22 | }; 23 | }); 24 | return saleProducts; 25 | } 26 | }, 27 | mutations: { 28 | reducePrice: (state, payload) => { 29 | state.products.forEach( product => { 30 | product.price -= payload 31 | }); 32 | } 33 | }, 34 | actions: { 35 | reducePrice: (context, payload) => { 36 | setTimeout(function(){ // reach out for data 37 | context.commit('reducePrice', payload); 38 | }, 2000); 39 | } 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | --------------------------------------------------------------------------------