npm package: 9vuex_store
Description: A Vue.js project
Latest version: 1.0.0

1.回顾子父级数据传递
2.Vuex：多个组件共享数据
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
    2.1 什么情况下使用vuex:
        如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，
        您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，
        您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
        引用 Redux 的作者 Dan Abramov 的话说就是：
        Flux 架构就像眼镜：您自会知道什么时候需要它
    2.2 vuex状态管理
        view ----> (dispatch)Action -->(Commit)Mutations -->(Mutate)State --> View
        注意： Action不是必需品，如果有异步操作才可能用到Action，否则可以不使用
3.安装
    cnpm install vuex --save
4.使用
    4.1 引入main.js
      import Vuex from 'vuex' 
      Vue.use(Vuex)
    4.2 创建一个store仓库：
          const store = new Vuex.Store({
            state: {
              count: 0
            },
            mutations: {
              increment (state) {
                state.count++
              }
            }
         })
    4.3 将store注入到vue实例当中
         /* eslint-disable no-new */
         new Vue({
           el: '#app',
           router,
           store,
           components: { App },
           template: '<App/>'
         })     
    4.4 在组件中获取状态，如：
            computed:{
              getCount()
              {
                return this.$store.state.count;
              }
            },
    4.5 变更状态：main.js
        mutations: {
            increment (state) {
              // 变更状态
              state.count++
        }
    4.6在组件中调用执行
        methods:{
              add(){
                this.$store.commit("increment")
              }
           }
    4.7 当加入actions，就不再直接外部调用mutations了:
        Action 类似于 mutation，不同在于：
        Action 提交的是 mutation，而不是直接变更状态。
        Action 可以包含任意异步操作
           mutations: {
              increment(state) {
                state.count++;
              },
              decrease(state) {
                state.count --;
              }
            },
            actions: {
              increment(context) {
                context.commit("increment");
              },
              decrease(context) {
                context.commit("decrease");
              }
        组件调用时由this.$store.commit("increment") ===>  this.$store.dispatch("increment")   
    4.8 取数据时一般不直接使用state，而是加入解决方案使用getters
        getters:{
            getState(state){
              return state.count > 0 ? state.count : 0
            }
          }
        此时,组件读取数值时由:
             this.$store.state.count ==> this.$store.getters.getState
    4.9 新建store/index.js 
        将vuex提取到index.js中
5. 使用npm管理组件版本
    5.1 npm发布一个包
        5.1.1 官网注册账号
        5.1.2 cmd 下登录账号：npm login
        5.1.3 发布：npm plublish
    5.2 创建自己的组件
        5.2.1 初始化项目
        5.2.2 修改package.json 文件
             "private":false
             "main": "dist/vue-router.min.js"
        5.2.3 修改webpack.prod.config.js 文件
              5.2.3.1 修改out输出目录
                output: {
                    path: config.build.assetsRoot,
                    publicPath: config.build.assetsPublicPath,
                    filename: 'vue-wgw-counter.min.js',
                    library:'VueWgWCounter',
                    libraryTarget: 'umd',
                  },
              5.2.3.2 删除无用内容
                if (config.build.productionGzip) {
                  const CompressionWebpackPlugin = require('compression-webpack-plugin')
                
                  webpackConfig.plugins.push(
                    new CompressionWebpackPlugin({
                      asset: '[path].gz[query]',
                      algorithm: 'gzip',
                      test: new RegExp(
                        '\\.(' +
                        config.build.productionGzipExtensions.join('|') +
                        ')$'
                      ),
                      threshold: 10240,
                      minRatio: 0.8
                    })
                  )
                }
                  // generate dist index.html with correct asset hash for caching.
                      // you can customize output by editing /index.html
                      // see https://github.com/ampedandwired/html-webpack-plugin
                      new HtmlWebpackPlugin({
                        filename: config.build.index,
                        template: 'index.html',
                        inject: true,
                        minify: {
                          removeComments: true,
                          collapseWhitespace: true,
                          removeAttributeQuotes: true
                          // more options:
                          // https://github.com/kangax/html-minifier#options-quick-reference
                        },
                        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
                        chunksSortMode: 'dependency'
                      })
                      new webpack.HashedModuleIdsPlugin(),
                      // enable scope hoisting
                      new webpack.optimize.ModuleConcatenationPlugin(),
                      // split vendor js into its own file
                      new webpack.optimize.CommonsChunkPlugin({
                        name: 'vendor',
                        minChunks (module) {
                          // any required modules inside node_modules are extracted to vendor
                          return (
                            module.resource &&
                            /\.js$/.test(module.resource) &&
                            module.resource.indexOf(
                              path.join(__dirname, '../node_modules')
                            ) === 0
                          )
                        }
                      }),
                      // extract webpack runtime and module manifest to its own file in order to
                      // prevent vendor hash from being updated whenever app bundle is updated
                      new webpack.optimize.CommonsChunkPlugin({
                        name: 'manifest',
                        minChunks: Infinity
                      }),
                      // This instance extracts shared chunks from code splitted chunks and bundles them
                      // in a separate chunk, similar to the vendor chunk
                      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
                      new webpack.optimize.CommonsChunkPlugin({
                        name: 'app',
                        async: 'vendor-async',
                        children: true,
                        minChunks: 3
                      }),
                  
                    // copy custom static assets
                    new CopyWebpackPlugin([
                      {
                        from: path.resolve(__dirname, '../static'),
                        to: config.build.assetsSubDirectory,
                        ignore: ['.*']
                      }
                    ])
                5.2.3.3 修改:K:\9vuex_store\config\index.js
                  assetsSubDirectory: 'static' ===> assetsSubDirectory: '/',
    5.3 修改输出
       5.3.1 修改main.js文件，输出自己的组件即可使用
            //VueWgWCounter来自于webpack.prod.conf.js中的配置library:'VueWgWCounter',
            import VueWgWCounter from './components/outter'
            export default VueWgWCounter
    5.4 切换到工程目录打包
        npm run build
    5.5 删除：K:\9vuex_store\.gitignore 中的 /dist/
    5.6 发布：npm publish