├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── App.vue
├── Counter.vue
├── actions.js
├── main.js
└── store.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-2"],
3 | "plugins": ["transform-runtime"],
4 | "comments": false
5 | }
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | .idea
6 | notes.md
7 | install.sh
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vuex-example
2 |
3 | > A Vue.js + Vuex example
4 |
5 | #Counters
6 | - Displays counters
7 | - Counters can be incremented or decremented
8 | - Counters can be added
9 |
10 | ## Build Setup
11 |
12 | ``` bash
13 | # install dependencies
14 | npm install
15 |
16 | # serve with hot reload at localhost:8080
17 | npm run dev
18 |
19 | # build for production with minification
20 | npm run build
21 | ```
22 |
23 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vuex-example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuex-example",
3 | "description": "A Vue.js project",
4 | "author": " <>",
5 | "private": true,
6 | "scripts": {
7 | "dev": "webpack-dev-server --inline --hot",
8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9 | },
10 | "dependencies": {
11 | "vue": "^1.0.0",
12 | "vuex": "^0.6.0"
13 | },
14 | "devDependencies": {
15 | "babel-core": "^6.0.0",
16 | "babel-loader": "^6.0.0",
17 | "babel-plugin-transform-runtime": "^6.0.0",
18 | "babel-preset-es2015": "^6.0.0",
19 | "babel-preset-stage-2": "^6.0.0",
20 | "babel-runtime": "^5.8.0",
21 | "cross-env": "^1.0.6",
22 | "css-loader": "^0.23.0",
23 | "file-loader": "^0.8.4",
24 | "json-loader": "^0.5.4",
25 | "url-loader": "^0.5.7",
26 | "vue-hot-reload-api": "^1.2.0",
27 | "vue-html-loader": "^1.0.0",
28 | "vue-loader": "^8.0.0",
29 | "vue-style-loader": "^1.0.0",
30 | "webpack": "^1.12.2",
31 | "webpack-dev-server": "^1.12.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Counters
4 |
5 |
6 |
7 |
8 |
3 | {{ count }}
4 |
5 |
6 |
7 |
8 |
9 |
10 |
24 |
25 |
--------------------------------------------------------------------------------
/src/actions.js:
--------------------------------------------------------------------------------
1 | export const increment = ({ dispatch }, counterId) => dispatch('INCREMENT', counterId);
2 |
3 | export const decrement = ({ dispatch }, counterId) => dispatch('DECREMENT', counterId);
4 |
5 | export const addCounter = ({ dispatch }) => dispatch('ADD_COUNTER');
6 |
7 | export const incrementIfOdd = (store, counterId) => {
8 | if (store.state.counters[counterId] % 2 !== 0) {
9 | store.dispatch('INCREMENT', counterId)
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import store from './store';
3 | import App from './App.vue';
4 |
5 | Vue.config.debug = true;
6 |
7 | new Vue({
8 | store,
9 | el: 'body',
10 | components: { App }
11 | });
12 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import Vuex from 'vuex';
2 | import Vue from 'vue';
3 |
4 | Vue.use(Vuex);
5 |
6 | export default new Vuex.Store({
7 | // Initial state
8 | state: {
9 | counters: []
10 | },
11 | // Mutations
12 | mutations: {
13 | INCREMENT: ({ counters }, counterId) => {
14 | counters.$set(counterId, counters[counterId] + 1)
15 | },
16 | DECREMENT: ({ counters }, counterId) => {
17 | counters.$set(counterId, counters[counterId] - 1)
18 | },
19 | ADD_COUNTER: ({ counters }) => {
20 | counters.push(0)
21 | }
22 | }
23 | });
24 |
--------------------------------------------------------------------------------
/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 | resolveLoader: {
12 | root: path.join(__dirname, 'node_modules'),
13 | },
14 | module: {
15 | loaders: [
16 | {
17 | test: /\.vue$/,
18 | loader: 'vue'
19 | },
20 | {
21 | test: /\.js$/,
22 | loader: 'babel',
23 | exclude: /node_modules/
24 | },
25 | {
26 | test: /\.json$/,
27 | loader: 'json'
28 | },
29 | {
30 | test: /\.(png|jpg|gif|svg)$/,
31 | loader: 'url',
32 | query: {
33 | limit: 10000,
34 | name: '[name].[ext]?[hash]'
35 | }
36 | }
37 | ]
38 | },
39 | devServer: {
40 | historyApiFallback: true,
41 | noInfo: true
42 | },
43 | devtool: 'eval-source-map'
44 | }
45 |
46 | if (process.env.NODE_ENV === 'production') {
47 | module.exports.devtool = 'source-map'
48 | // http://vuejs.github.io/vue-loader/workflow/production.html
49 | module.exports.plugins = (module.exports.plugins || []).concat([
50 | new webpack.DefinePlugin({
51 | 'process.env': {
52 | NODE_ENV: '"production"'
53 | }
54 | }),
55 | new webpack.optimize.UglifyJsPlugin({
56 | compress: {
57 | warnings: false
58 | }
59 | }),
60 | new webpack.optimize.OccurenceOrderPlugin()
61 | ])
62 | }
63 |
--------------------------------------------------------------------------------