├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── images
    ├── 1.png
    └── 2.png
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Demo1.vue
    │   ├── Demo2.vue
    │   └── Hello.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── store
    │   └── index.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Vuex + xstate
  3 | 
  4 | > A Vue.js project
  5 | >翻译原地址：https://medium.com/@brockreece/vuex-xstate-4f9ea23bb24e
  6 | 
  7 | 最近看了David Khourshid在`React Rally`上的《关于基于状态机的UI设计》最新演讲，激动不己，决定拿来玩一玩；
  8 | 项目：[xstate](https://github.com/davidkpiano/xstate)。
  9 | 
 10 | PPT:[Infinitely Better UIs with Finite Automata](http://slides.com/davidkhourshid/finite-state-machines#/)
 11 | 
 12 | ![](https://github.com/itemsets/vuex2-xstate/raw/master/images/1.png) 
 13 | 
 14 | 而后，我觉得这种模式非常适合Vue.js，特别是Vuex；我在`codepen`上快速地完成了几个示例；运行并检查了之后，我将这些示例发送给了David Khourshid。
 15 | 
 16 | 让我们看看`xstate`在Vue是怎么集成的：
 17 | 
 18 | ```html
 19 | <div id="app">
 20 |   <div>{{ state }}</div>
 21 |   <button :style="{color: state}">{{ buttonText }}</button>
 22 | </div>
 23 | ```
 24 | 
 25 | ```js
 26 | const lightMachine = xstate.Machine({
 27 |   key: "light",
 28 |   initial: "green",
 29 |   states: {
 30 |     green: {
 31 |       on: {
 32 |         TIMER: "yellow"
 33 |       }
 34 |     },
 35 |     yellow: {
 36 |       on: {
 37 |         TIMER: "red"
 38 |       }
 39 |     },
 40 |     red: {
 41 |       on: {
 42 |         TIMER: "green"
 43 |       }
 44 |     }
 45 |   }
 46 | })
 47 | const store = new Vuex.Store({
 48 |   state: {
 49 |     currentState: lightMachine.initial
 50 |   },
 51 |   mutations: {
 52 |     transition(state, action) {
 53 |       state.currentState = lightMachine.transition(state.currentState, action).value
 54 |     }
 55 |   }
 56 | })
 57 | new Vue({
 58 |   el: "#app",
 59 |   store,
 60 |   mounted() {
 61 |     setInterval(() => {
 62 |       this.$store.commit("transition", "TIMER")
 63 |     }, 3000)
 64 |   },
 65 |   computed: {
 66 |     buttonText() {
 67 |       return this.buttonOptions[this.state]
 68 |     },
 69 |     state() {
 70 |       return this.$store.state.currentState
 71 |     }
 72 |   },
 73 |   data() {
 74 |     return {
 75 |       buttonOptions: {
 76 |         green: "foo",
 77 |         yellow: "bar",
 78 |         red: "baz"
 79 |       }
 80 |     }
 81 |   }
 82 | })
 83 | 
 84 | ```
 85 | 
 86 | https://codepen.io/BrockReece/pen/ZJqgpO
 87 | 
 88 | 对于Vuex示例，我将状态机逻辑保持在Vuex存储之外，并且仅跟踪存储中的当前状态。我认为这种方法可以非常适合Vuex模块。
 89 | 
 90 | ```js
 91 | new Vue({
 92 |   el: "#app",
 93 |   mounted() {
 94 |     this.state = this.lightMachine.initial;
 95 |     setInterval(() => {
 96 |       this.state = this.lightMachine.transition(this.state, "TIMER").value;
 97 |     }, 3000);
 98 |   },
 99 | 
100 |   computed: {
101 |     buttonText() {
102 |       return this.buttonOptions[this.state];
103 |     }
104 |   },
105 |   data() {
106 |     return {
107 |       state: null,
108 |       lightMachine: xstate.Machine({
109 |         key: "light",
110 |         initial: "green",
111 |         states: {
112 |           green: {
113 |             on: {
114 |               TIMER: "yellow"
115 |             }
116 |           },
117 |           yellow: {
118 |             on: {
119 |               TIMER: "red"
120 |             }
121 |           },
122 |           red: {
123 |             on: {
124 |               TIMER: "green"
125 |             }
126 |           }
127 |         }
128 |       }),
129 |       buttonOptions: {
130 |         green: "foo",
131 |         yellow: "bar",
132 |         red: "baz"
133 |       }
134 |     };
135 |   }
136 | });
137 | 
138 | ```
139 | 
140 | 
141 | https://codepen.io/BrockReece/pen/EvdwpJ
142 | 
143 | 我想David Khourshid已经把我提供的示例放到`xstate`项目的案例里面了。
144 | 
145 | ![](https://github.com/itemsets/vuex2-xstate/raw/master/images/2.png) 
146 | 
147 | 好了，接下来我要认真考虑在下一个项目中狠狠地使用上这个东西。
148 | 
149 | 
150 | ## Build Setup
151 | 
152 | ``` bash
153 | # install dependencies
154 | npm install
155 | 
156 | # serve with hot reload at localhost:8080
157 | npm run dev
158 | 
159 | # build for production with minification
160 | npm run build
161 | 
162 | # build for production and view the bundle analyzer report
163 | npm run build --report
164 | ```
165 | 
166 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | process.env.NODE_ENV = 'production'
 4 | 
 5 | var ora = require('ora')
 6 | var rm = require('rimraf')
 7 | var path = require('path')
 8 | var chalk = require('chalk')
 9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 | 
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 | 
16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
17 |   if (err) throw err
18 |   webpack(webpackConfig, function (err, stats) {
19 |     spinner.stop()
20 |     if (err) throw err
21 |     process.stdout.write(stats.toString({
22 |       colors: true,
23 |       modules: false,
24 |       children: false,
25 |       chunks: false,
26 |       chunkModules: false
27 |     }) + '\n\n')
28 | 
29 |     if (stats.hasErrors()) {
30 |       console.log(chalk.red('  Build failed with errors.\n'))
31 |       process.exit(1)
32 |     }
33 | 
34 |     console.log(chalk.cyan('  Build complete.\n'))
35 |     console.log(chalk.yellow(
36 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
37 |       '  Opening index.html over file:// won\'t work.\n'
38 |     ))
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var chalk = require('chalk')
 2 | var semver = require('semver')
 3 | var packageConfig = require('../package.json')
 4 | var shell = require('shelljs')
 5 | function exec (cmd) {
 6 |   return require('child_process').execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   }
15 | ]
16 | 
17 | if (shell.which('npm')) {
18 |   versionRequirements.push({
19 |     name: 'npm',
20 |     currentVersion: exec('npm --version'),
21 |     versionRequirement: packageConfig.engines.npm
22 |   })
23 | }
24 | 
25 | module.exports = function () {
26 |   var warnings = []
27 |   for (var i = 0; i < versionRequirements.length; i++) {
28 |     var mod = versionRequirements[i]
29 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
30 |       warnings.push(mod.name + ': ' +
31 |         chalk.red(mod.currentVersion) + ' should be ' +
32 |         chalk.green(mod.versionRequirement)
33 |       )
34 |     }
35 |   }
36 | 
37 |   if (warnings.length) {
38 |     console.log('')
39 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
40 |     console.log()
41 |     for (var i = 0; i < warnings.length; i++) {
42 |       var warning = warnings[i]
43 |       console.log('  ' + warning)
44 |     }
45 |     console.log()
46 |     process.exit(1)
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | var config = require('../config')
 4 | if (!process.env.NODE_ENV) {
 5 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 6 | }
 7 | 
 8 | var opn = require('opn')
 9 | var path = require('path')
10 | var express = require('express')
11 | var webpack = require('webpack')
12 | var proxyMiddleware = require('http-proxy-middleware')
13 | var webpackConfig = require('./webpack.dev.conf')
14 | 
15 | // default port where dev server listens for incoming traffic
16 | var port = process.env.PORT || config.dev.port
17 | // automatically open browser, if not set will be false
18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser
19 | // Define HTTP proxies to your custom API backend
20 | // https://github.com/chimurai/http-proxy-middleware
21 | var proxyTable = config.dev.proxyTable
22 | 
23 | var app = express()
24 | var compiler = webpack(webpackConfig)
25 | 
26 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
27 |   publicPath: webpackConfig.output.publicPath,
28 |   quiet: true
29 | })
30 | 
31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
32 |   log: false,
33 |   heartbeat: 2000
34 | })
35 | // force page reload when html-webpack-plugin template changes
36 | compiler.plugin('compilation', function (compilation) {
37 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
38 |     hotMiddleware.publish({ action: 'reload' })
39 |     cb()
40 |   })
41 | })
42 | 
43 | // proxy api requests
44 | Object.keys(proxyTable).forEach(function (context) {
45 |   var options = proxyTable[context]
46 |   if (typeof options === 'string') {
47 |     options = { target: options }
48 |   }
49 |   app.use(proxyMiddleware(options.filter || context, options))
50 | })
51 | 
52 | // handle fallback for HTML5 history API
53 | app.use(require('connect-history-api-fallback')())
54 | 
55 | // serve webpack bundle output
56 | app.use(devMiddleware)
57 | 
58 | // enable hot-reload and state-preserving
59 | // compilation error display
60 | app.use(hotMiddleware)
61 | 
62 | // serve pure static assets
63 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
64 | app.use(staticPath, express.static('./static'))
65 | 
66 | var uri = 'http://localhost:' + port
67 | 
68 | var _resolve
69 | var readyPromise = new Promise(resolve => {
70 |   _resolve = resolve
71 | })
72 | 
73 | console.log('> Starting dev server...')
74 | devMiddleware.waitUntilValid(() => {
75 |   console.log('> Listening at ' + uri + '\n')
76 |   // when env is testing, don't need open it
77 |   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
78 |     opn(uri)
79 |   }
80 |   _resolve()
81 | })
82 | 
83 | var server = app.listen(port)
84 | 
85 | module.exports = {
86 |   ready: readyPromise,
87 |   close: () => {
88 |     server.close()
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 | 
15 |   var cssLoader = {
16 |     loader: 'css-loader',
17 |     options: {
18 |       minimize: process.env.NODE_ENV === 'production',
19 |       sourceMap: options.sourceMap
20 |     }
21 |   }
22 | 
23 |   // generate loader string to be used with extract text plugin
24 |   function generateLoaders (loader, loaderOptions) {
25 |     var loaders = [cssLoader]
26 |     if (loader) {
27 |       loaders.push({
28 |         loader: loader + '-loader',
29 |         options: Object.assign({}, loaderOptions, {
30 |           sourceMap: options.sourceMap
31 |         })
32 |       })
33 |     }
34 | 
35 |     // Extract CSS when that option is specified
36 |     // (which is the case during production build)
37 |     if (options.extract) {
38 |       return ExtractTextPlugin.extract({
39 |         use: loaders,
40 |         fallback: 'vue-style-loader'
41 |       })
42 |     } else {
43 |       return ['vue-style-loader'].concat(loaders)
44 |     }
45 |   }
46 | 
47 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
48 |   return {
49 |     css: generateLoaders(),
50 |     postcss: generateLoaders(),
51 |     less: generateLoaders('less'),
52 |     sass: generateLoaders('sass', { indentedSyntax: true }),
53 |     scss: generateLoaders('sass'),
54 |     stylus: generateLoaders('stylus'),
55 |     styl: generateLoaders('stylus')
56 |   }
57 | }
58 | 
59 | // Generate loaders for standalone style files (outside of .vue)
60 | exports.styleLoaders = function (options) {
61 |   var output = []
62 |   var loaders = exports.cssLoaders(options)
63 |   for (var extension in loaders) {
64 |     var loader = loaders[extension]
65 |     output.push({
66 |       test: new RegExp('\\.' + extension + '$'),
67 |       use: loader
68 |     })
69 |   }
70 |   return output
71 | }
72 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var config = require('../config')
 3 | var isProduction = process.env.NODE_ENV === 'production'
 4 | 
 5 | module.exports = {
 6 |   loaders: utils.cssLoaders({
 7 |     sourceMap: isProduction
 8 |       ? config.build.productionSourceMap
 9 |       : config.dev.cssSourceMap,
10 |     extract: isProduction
11 |   }),
12 |   transformToRequire: {
13 |     video: 'src',
14 |     source: 'src',
15 |     img: 'src',
16 |     image: 'xlink:href'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var utils = require('./utils')
 3 | var config = require('../config')
 4 | var vueLoaderConfig = require('./vue-loader.conf')
 5 | 
 6 | function resolve (dir) {
 7 |   return path.join(__dirname, '..', dir)
 8 | }
 9 | 
10 | module.exports = {
11 |   entry: {
12 |     app: './src/main.js'
13 |   },
14 |   output: {
15 |     path: config.build.assetsRoot,
16 |     filename: '[name].js',
17 |     publicPath: process.env.NODE_ENV === 'production'
18 |       ? config.build.assetsPublicPath
19 |       : config.dev.assetsPublicPath
20 |   },
21 |   resolve: {
22 |     extensions: ['.js', '.vue', '.json'],
23 |     alias: {
24 |       'vue$': 'vue/dist/vue.esm.js',
25 |       '@': resolve('src'),
26 |     }
27 |   },
28 |   module: {
29 |     rules: [
30 |       {
31 |         test: /\.vue$/,
32 |         loader: 'vue-loader',
33 |         options: vueLoaderConfig
34 |       },
35 |       {
36 |         test: /\.js$/,
37 |         loader: 'babel-loader',
38 |         include: [resolve('src'), resolve('test')]
39 |       },
40 |       {
41 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
42 |         loader: 'url-loader',
43 |         options: {
44 |           limit: 10000,
45 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
46 |         }
47 |       },
48 |       {
49 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
50 |         loader: 'url-loader',
51 |         options: {
52 |           limit: 10000,
53 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
54 |         }
55 |       },
56 |       {
57 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
58 |         loader: 'url-loader',
59 |         options: {
60 |           limit: 10000,
61 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
62 |         }
63 |       }
64 |     ]
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var webpack = require('webpack')
 3 | var config = require('../config')
 4 | var merge = require('webpack-merge')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // cheap-module-eval-source-map is faster for development
19 |   devtool: '#cheap-module-eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.NoEmitOnErrorsPlugin(),
27 |     // https://github.com/ampedandwired/html-webpack-plugin
28 |     new HtmlWebpackPlugin({
29 |       filename: 'index.html',
30 |       template: 'index.html',
31 |       inject: true
32 |     }),
33 |     new FriendlyErrorsPlugin()
34 |   ]
35 | })
36 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var utils = require('./utils')
  3 | var webpack = require('webpack')
  4 | var config = require('../config')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  9 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 11 | 
 12 | var env = config.build.env
 13 | 
 14 | var webpackConfig = merge(baseWebpackConfig, {
 15 |   module: {
 16 |     rules: utils.styleLoaders({
 17 |       sourceMap: config.build.productionSourceMap,
 18 |       extract: true
 19 |     })
 20 |   },
 21 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 22 |   output: {
 23 |     path: config.build.assetsRoot,
 24 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 25 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 26 |   },
 27 |   plugins: [
 28 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 29 |     new webpack.DefinePlugin({
 30 |       'process.env': env
 31 |     }),
 32 |     new webpack.optimize.UglifyJsPlugin({
 33 |       compress: {
 34 |         warnings: false
 35 |       },
 36 |       sourceMap: true
 37 |     }),
 38 |     // extract css into its own file
 39 |     new ExtractTextPlugin({
 40 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 41 |     }),
 42 |     // Compress extracted CSS. We are using this plugin so that possible
 43 |     // duplicated CSS from different components can be deduped.
 44 |     new OptimizeCSSPlugin({
 45 |       cssProcessorOptions: {
 46 |         safe: true
 47 |       }
 48 |     }),
 49 |     // generate dist index.html with correct asset hash for caching.
 50 |     // you can customize output by editing /index.html
 51 |     // see https://github.com/ampedandwired/html-webpack-plugin
 52 |     new HtmlWebpackPlugin({
 53 |       filename: config.build.index,
 54 |       template: 'index.html',
 55 |       inject: true,
 56 |       minify: {
 57 |         removeComments: true,
 58 |         collapseWhitespace: true,
 59 |         removeAttributeQuotes: true
 60 |         // more options:
 61 |         // https://github.com/kangax/html-minifier#options-quick-reference
 62 |       },
 63 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 64 |       chunksSortMode: 'dependency'
 65 |     }),
 66 |     // keep module.id stable when vender modules does not change
 67 |     new webpack.HashedModuleIdsPlugin(),
 68 |     // split vendor js into its own file
 69 |     new webpack.optimize.CommonsChunkPlugin({
 70 |       name: 'vendor',
 71 |       minChunks: function (module, count) {
 72 |         // any required modules inside node_modules are extracted to vendor
 73 |         return (
 74 |           module.resource &&
 75 |           /\.js$/.test(module.resource) &&
 76 |           module.resource.indexOf(
 77 |             path.join(__dirname, '../node_modules')
 78 |           ) === 0
 79 |         )
 80 |       }
 81 |     }),
 82 |     // extract webpack runtime and module manifest to its own file in order to
 83 |     // prevent vendor hash from being updated whenever app bundle is updated
 84 |     new webpack.optimize.CommonsChunkPlugin({
 85 |       name: 'manifest',
 86 |       chunks: ['vendor']
 87 |     }),
 88 |     // copy custom static assets
 89 |     new CopyWebpackPlugin([
 90 |       {
 91 |         from: path.resolve(__dirname, '../static'),
 92 |         to: config.build.assetsSubDirectory,
 93 |         ignore: ['.*']
 94 |       }
 95 |     ])
 96 |   ]
 97 | })
 98 | 
 99 | if (config.build.productionGzip) {
100 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
101 | 
102 |   webpackConfig.plugins.push(
103 |     new CompressionWebpackPlugin({
104 |       asset: '[path].gz[query]',
105 |       algorithm: 'gzip',
106 |       test: new RegExp(
107 |         '\\.(' +
108 |         config.build.productionGzipExtensions.join('|') +
109 |         ')$'
110 |       ),
111 |       threshold: 10240,
112 |       minRatio: 0.8
113 |     })
114 |   )
115 | }
116 | 
117 | if (config.build.bundleAnalyzerReport) {
118 |   var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
119 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
120 | }
121 | 
122 | module.exports = webpackConfig
123 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itemsets/vuex2-xstate/694744210cdf73743f04d5562269cc399086e1c6/images/1.png


--------------------------------------------------------------------------------
/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itemsets/vuex2-xstate/694744210cdf73743f04d5562269cc399086e1c6/images/2.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vuex-xstate</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files will be auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dd",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "bluezhan <2252263040@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.4.2",
14 |     "vuex": "^2.4.0",
15 |     "vue-router": "^2.7.0"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^7.1.2",
19 |     "babel-core": "^6.22.1",
20 |     "babel-loader": "^7.1.1",
21 |     "babel-plugin-transform-runtime": "^6.22.0",
22 |     "babel-preset-env": "^1.3.2",
23 |     "babel-preset-stage-2": "^6.22.0",
24 |     "babel-register": "^6.22.0",
25 |     "chalk": "^2.0.1",
26 |     "connect-history-api-fallback": "^1.3.0",
27 |     "copy-webpack-plugin": "^4.0.1",
28 |     "css-loader": "^0.28.0",
29 |     "cssnano": "^3.10.0",
30 |     "eventsource-polyfill": "^0.9.6",
31 |     "express": "^4.14.1",
32 |     "extract-text-webpack-plugin": "^2.0.0",
33 |     "file-loader": "^0.11.1",
34 |     "friendly-errors-webpack-plugin": "^1.1.3",
35 |     "html-webpack-plugin": "^2.28.0",
36 |     "http-proxy-middleware": "^0.17.3",
37 |     "webpack-bundle-analyzer": "^2.2.1",
38 |     "semver": "^5.3.0",
39 |     "shelljs": "^0.7.6",
40 |     "opn": "^5.1.0",
41 |     "optimize-css-assets-webpack-plugin": "^2.0.0",
42 |     "ora": "^1.2.0",
43 |     "rimraf": "^2.6.0",
44 |     "url-loader": "^0.5.8",
45 |     "vue-loader": "^13.0.4",
46 |     "vue-style-loader": "^3.0.1",
47 |     "vue-template-compiler": "^2.4.2",
48 |     "webpack": "^2.6.1",
49 |     "webpack-dev-middleware": "^1.10.0",
50 |     "webpack-hot-middleware": "^2.18.0",
51 |     "webpack-merge": "^4.1.0",
52 |     "xstate": "^1.2.1"
53 |   },
54 |   "engines": {
55 |     "node": ">= 4.0.0",
56 |     "npm": ">= 3.0.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <!-- <img src="./assets/logo.png"> -->
 4 |     <router-view></router-view>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app'
11 | }
12 | </script>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   text-align: center;
20 |   color: #2c3e50;
21 |   margin-top: 60px;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itemsets/vuex2-xstate/694744210cdf73743f04d5562269cc399086e1c6/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Demo1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Demo1">
 3 |     <h1>{{ msg }}</h1>
 4 |     <!-- <h2>Essential Links</h2> -->
 5 |     <ul>
 6 |       <li>
 7 |         <router-link to="demo1">Go to demo-1</router-link>
 8 |       </li>
 9 |       <li>
10 |         <router-link to="demo2">Go to demo-2</router-link>
11 |       </li>
12 |     </ul>
13 |     <div>{{ state }}</div>
14 |     <button :style="{color: state}">{{ buttonText }}</button>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | 
20 | export default {
21 |   name: 'Demo1',
22 |   data () {
23 |     return {
24 |       buttonOptions: {
25 |         green: "foo",
26 |         yellow: "bar",
27 |         red: "baz"
28 |       },
29 |       msg: 'Finite State Machines'
30 |     }
31 |   },
32 |   mounted() {
33 |     setInterval(() => {
34 |       this.$store.commit("transition", "TIMER")
35 |     }, 3000)
36 |   },
37 |   computed: {
38 |     buttonText() {
39 |       return this.buttonOptions[this.state]
40 |     },
41 |     state() {
42 |       return this.$store.state.currentState
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <!-- Add "scoped" attribute to limit CSS to this component only -->
49 | <style scoped>
50 | h1, h2 {
51 |   font-weight: normal;
52 | }
53 | 
54 | ul {
55 |   list-style-type: none;
56 |   padding: 0;
57 | }
58 | 
59 | button {
60 |   padding: 5px 25px;
61 | }
62 | 
63 | li {
64 |   display: inline-block;
65 |   margin: 0 10px;
66 | }
67 | 
68 | a {
69 |   color: #42b983;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/Demo2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Demo2">
 3 |     <h1>{{ msg }}</h1>
 4 |     <ul>
 5 |       <li>
 6 |         <router-link to="demo1">Go to demo-1</router-link>
 7 |       </li>
 8 |       <li>
 9 |         <router-link to="demo2">Go to demo-2</router-link>
10 |       </li>
11 |     </ul>
12 |     <div>{{ state }}</div>
13 |     <button :style="{color: state}">{{ buttonText }}</button>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | 
19 | export default {
20 |   name: 'Demo2',
21 |   data () {
22 |     return {
23 |       state: null,
24 |       lightMachine: this.$store.getters.getlightMachine,
25 |       buttonOptions: {
26 |         green: "foo",
27 |         yellow: "bar",
28 |         red: "baz"
29 |       },
30 |       msg: 'Finite State Machines'
31 |     }
32 |   },
33 |   mounted() {
34 |     this.state = this.lightMachine.initial;
35 |     setInterval(() => {
36 |       this.state = this.lightMachine.transition(this.state, "TIMER").value;
37 |     }, 3000);
38 |   },
39 |   computed: {
40 |     buttonText() {
41 |       return this.buttonOptions[this.state];
42 |     }
43 |   },
44 | }
45 | 
46 | </script>
47 | 
48 | <!-- Add "scoped" attribute to limit CSS to this component only -->
49 | <style scoped>
50 | h1, h2 {
51 |   font-weight: normal;
52 | }
53 | 
54 | button {
55 |   padding: 5px 25px;
56 | }
57 | 
58 | ul {
59 |   list-style-type: none;
60 |   padding: 0;
61 | }
62 | 
63 | li {
64 |   display: inline-block;
65 |   margin: 0 10px;
66 | }
67 | 
68 | a {
69 |   color: #42b983;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li>
 7 |         <router-link to="demo1">Go to demo-1</router-link>
 8 |       </li>
 9 |       <li>
10 |         <router-link to="demo2">Go to demo-2</router-link>
11 |       </li>
12 |     </ul>
13 |     <ul>
14 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
15 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
16 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
17 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
18 |       <br>
19 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
20 |     </ul>
21 |     <h2>Ecosystem</h2>
22 |     <ul>
23 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
24 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
25 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
26 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
27 |     </ul>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: 'hello',
34 |   data () {
35 |     return {
36 |       msg: 'Welcome to Your Vuex+state App'
37 |     }
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h1, h2 {
45 |   font-weight: normal;
46 | }
47 | 
48 | ul {
49 |   list-style-type: none;
50 |   padding: 0;
51 | }
52 | 
53 | li {
54 |   display: inline-block;
55 |   margin: 0 10px;
56 | }
57 | 
58 | a {
59 |   color: #42b983;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import store from './store'
 7 | 
 8 | Vue.config.productionTip = true;
 9 | 
10 | /* eslint-disable no-new */
11 | new Vue({
12 |   el: '#app',
13 |   router,
14 |   store,
15 |   template: '<App/>',
16 |   components: { App }
17 | })
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Hello from '@/components/Hello'
 4 | import Demo1 from '@/components/Demo1'
 5 | import Demo2 from '@/components/Demo2'
 6 | // import Demo3 from '@/components/Demo3'
 7 | 
 8 | Vue.use(Router)
 9 | 
10 | export default new Router({
11 |   routes: [
12 |     {
13 |       path: '/',
14 |       name: 'Hello',
15 |       component: Hello
16 |     },
17 |     {
18 |       path: '/demo1',
19 |       name: 'Demo1',
20 |       component: Demo1
21 |     },
22 |     {
23 |       path: '/demo2',
24 |       name: 'Demo2',
25 |       component: Demo2
26 |     }
27 |   ]
28 | })
29 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import { Machine } from 'xstate';
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | const lightMachine = Machine({
 8 |   key: "light",
 9 |   initial: "green",
10 |   states: {
11 |     green: {
12 |       on: {
13 |         TIMER: "yellow"
14 |       }
15 |     },
16 |     yellow: {
17 |       on: {
18 |         TIMER: "red"
19 |       }
20 |     },
21 |     red: {
22 |       on: {
23 |         TIMER: "green"
24 |       }
25 |     }
26 |   }
27 | })
28 | 
29 | export default new Vuex.Store({
30 |   state: {
31 |     currentState: lightMachine.initial
32 |   },
33 |   mutations: {
34 |     transition(state, action) {
35 |       state.currentState = lightMachine.transition(state.currentState, action).value
36 |     }
37 |   },
38 |   getters: {
39 |     getlightMachine: (state, getters) => {
40 |       return lightMachine
41 |     }
42 |   },
43 | })
44 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itemsets/vuex2-xstate/694744210cdf73743f04d5562269cc399086e1c6/static/.gitkeep


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