{"_id":"9vuex_store","_rev":"1-e86ec76ba4489ef56549488c73b45729","name":"9vuex_store","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"9vuex_store","version":"1.0.0","description":"A Vue.js project","author":"","private":false,"scripts":{"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start":"npm run dev","build":"node build/build.js"},"main":"dist/vue-router.min.js","dependencies":{"vue":"^2.5.2","vue-router":"^3.0.1","vuex":"^3.1.0"},"devDependencies":{"autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-loader":"^7.1.1","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-runtime":"^6.22.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","chalk":"^2.0.1","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","extract-text-webpack-plugin":"^3.0.0","file-loader":"^1.1.4","friendly-errors-webpack-plugin":"^1.6.1","html-webpack-plugin":"^2.30.1","node-notifier":"^5.1.2","optimize-css-assets-webpack-plugin":"^3.2.0","ora":"^1.2.0","portfinder":"^1.0.13","postcss-import":"^11.0.0","postcss-loader":"^2.0.8","postcss-url":"^7.2.1","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","uglifyjs-webpack-plugin":"^1.1.1","url-loader":"^0.5.8","vue-loader":"^13.3.0","vue-style-loader":"^3.0.1","vue-template-compiler":"^2.5.2","webpack":"^3.6.0","webpack-bundle-analyzer":"^2.9.0","webpack-dev-server":"^2.9.1","webpack-merge":"^4.1.0"},"engines":{"node":">= 6.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"_id":"9vuex_store@1.0.0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ClFWEBTeJeOH54ke6okslyDq4bCQnplQ/n3X5ZQKxDTd4DpohgEB3Mq7PtHErKTSl0Q2D4fy1GoolVaf6NPw8g==","shasum":"355f734113e2741795273695cda3e20cee7d19d4","tarball":"https://registry.npmjs.org/9vuex_store/-/9vuex_store-1.0.0.tgz","fileCount":29,"unpackedSize":867592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1oaVCRA9TVsSAnZWagAAwcIP/2x/5f/AxNZw2lc/mrRB\nBcMx3pgmlWmk+fZ7nSSoGu6r/Ynq01bYuDDduppVvpW3DrLZZjLwOQbIceBN\n/zhw/+Nx6dQSEcSx9jp6rVShMl2LyW/AUGVul69cTkk/d26SEkYxkjqGFLyw\ndkGIto2mDfzvaqMcjyEExhO6wPLk2gX0nRVgzSuN7a/9+2SDkYa7qR6hD7CU\naWUuetZXwHwBYxL3E8sFxYImVTxSEDHofVepG0aSIu14iMD4flsPLAnGfov7\nTC9vx/izn4jJQbkxeKhTGBCmjoyGxQg/a4JGBDxMOIXsRMRNhn7Qruui7vFG\nUFA/TuVlHBatjISSLJOE71loMY4HoKbvR6QtkR6kDnQAJ1GdZdlbY4ECmMBr\ni0SppvNpJ0L4bbP3A4WdrIS1Oj88VSKzK30qXv1xY2gZGUj2s5p6vx1Gwwl0\noShpiMU+nt3Xza+kC7jMthKSzMhCVFoq8nnXM6kbx6tmaCGon3gmkZ1+yPta\nLgy/Up0pqQDKs2atKjaSLY1h/foxc8ZLQfdt9JtooiZAR1yT7DmN68yfp5yI\ntyIhlwpGbdzi0ZTgia0qAexoknxxzL+ztl+OXXNGCRt/w/WUy1tqXs3ehW2s\nrEtO6QfeTuJs3Li3BkbYkVXZMfLUJTSkVNBKCzvGDSHFj7HCLesNCHFZA4VX\n8QLn\r\n=viYK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHv0vQJHqflUTveVwpYHidYkV1FIadwZPFHzIjt6jhTgAiBImf7GieyoSiubagIm6Cjl8PxhWSCIe9/6DZYTH8NYxA=="}]},"maintainers":[{"name":"phantom0925","email":"995945908@qq.com"}],"_npmUser":{"name":"phantom0925","email":"995945908@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/9vuex_store_1.0.0_1557563028629_0.4445127004907852"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-11T08:23:48.629Z","1.0.0":"2019-05-11T08:23:48.814Z","modified":"2022-04-04T10:25:26.373Z"},"maintainers":[{"name":"phantom0925","email":"995945908@qq.com"}],"description":"A Vue.js project","readme":"1.回顾子父级数据传递\n2.Vuex：多个组件共享数据\n    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。\n    它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。\n    2.1 什么情况下使用vuex:\n        如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，\n        您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，\n        您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。\n        引用 Redux 的作者 Dan Abramov 的话说就是：\n        Flux 架构就像眼镜：您自会知道什么时候需要它\n    2.2 vuex状态管理\n        view ----> (dispatch)Action -->(Commit)Mutations -->(Mutate)State --> View\n        注意： Action不是必需品，如果有异步操作才可能用到Action，否则可以不使用\n3.安装\n    cnpm install vuex --save\n4.使用\n    4.1 引入main.js\n      import Vuex from 'vuex' \n      Vue.use(Vuex)\n    4.2 创建一个store仓库：\n          const store = new Vuex.Store({\n            state: {\n              count: 0\n            },\n            mutations: {\n              increment (state) {\n                state.count++\n              }\n            }\n         })\n    4.3 将store注入到vue实例当中\n         /* eslint-disable no-new */\n         new Vue({\n           el: '#app',\n           router,\n           store,\n           components: { App },\n           template: '<App/>'\n         })     \n    4.4 在组件中获取状态，如：\n            computed:{\n              getCount()\n              {\n                return this.$store.state.count;\n              }\n            },\n    4.5 变更状态：main.js\n        mutations: {\n            increment (state) {\n              // 变更状态\n              state.count++\n        }\n    4.6在组件中调用执行\n        methods:{\n              add(){\n                this.$store.commit(\"increment\")\n              }\n           }\n    4.7 当加入actions，就不再直接外部调用mutations了:\n        Action 类似于 mutation，不同在于：\n        Action 提交的是 mutation，而不是直接变更状态。\n        Action 可以包含任意异步操作\n           mutations: {\n              increment(state) {\n                state.count++;\n              },\n              decrease(state) {\n                state.count --;\n              }\n            },\n            actions: {\n              increment(context) {\n                context.commit(\"increment\");\n              },\n              decrease(context) {\n                context.commit(\"decrease\");\n              }\n        组件调用时由this.$store.commit(\"increment\") ===>  this.$store.dispatch(\"increment\")   \n    4.8 取数据时一般不直接使用state，而是加入解决方案使用getters\n        getters:{\n            getState(state){\n              return state.count > 0 ? state.count : 0\n            }\n          }\n        此时,组件读取数值时由:\n             this.$store.state.count ==> this.$store.getters.getState\n    4.9 新建store/index.js \n        将vuex提取到index.js中\n5. 使用npm管理组件版本\n    5.1 npm发布一个包\n        5.1.1 官网注册账号\n        5.1.2 cmd 下登录账号：npm login\n        5.1.3 发布：npm plublish\n    5.2 创建自己的组件\n        5.2.1 初始化项目\n        5.2.2 修改package.json 文件\n             \"private\":false\n             \"main\": \"dist/vue-router.min.js\"\n        5.2.3 修改webpack.prod.config.js 文件\n              5.2.3.1 修改out输出目录\n                output: {\n                    path: config.build.assetsRoot,\n                    publicPath: config.build.assetsPublicPath,\n                    filename: 'vue-wgw-counter.min.js',\n                    library:'VueWgWCounter',\n                    libraryTarget: 'umd',\n                  },\n              5.2.3.2 删除无用内容\n                if (config.build.productionGzip) {\n                  const CompressionWebpackPlugin = require('compression-webpack-plugin')\n                \n                  webpackConfig.plugins.push(\n                    new CompressionWebpackPlugin({\n                      asset: '[path].gz[query]',\n                      algorithm: 'gzip',\n                      test: new RegExp(\n                        '\\\\.(' +\n                        config.build.productionGzipExtensions.join('|') +\n                        ')$'\n                      ),\n                      threshold: 10240,\n                      minRatio: 0.8\n                    })\n                  )\n                }\n                  // generate dist index.html with correct asset hash for caching.\n                      // you can customize output by editing /index.html\n                      // see https://github.com/ampedandwired/html-webpack-plugin\n                      new HtmlWebpackPlugin({\n                        filename: config.build.index,\n                        template: 'index.html',\n                        inject: true,\n                        minify: {\n                          removeComments: true,\n                          collapseWhitespace: true,\n                          removeAttributeQuotes: true\n                          // more options:\n                          // https://github.com/kangax/html-minifier#options-quick-reference\n                        },\n                        // necessary to consistently work with multiple chunks via CommonsChunkPlugin\n                        chunksSortMode: 'dependency'\n                      })\n                      new webpack.HashedModuleIdsPlugin(),\n                      // enable scope hoisting\n                      new webpack.optimize.ModuleConcatenationPlugin(),\n                      // split vendor js into its own file\n                      new webpack.optimize.CommonsChunkPlugin({\n                        name: 'vendor',\n                        minChunks (module) {\n                          // any required modules inside node_modules are extracted to vendor\n                          return (\n                            module.resource &&\n                            /\\.js$/.test(module.resource) &&\n                            module.resource.indexOf(\n                              path.join(__dirname, '../node_modules')\n                            ) === 0\n                          )\n                        }\n                      }),\n                      // extract webpack runtime and module manifest to its own file in order to\n                      // prevent vendor hash from being updated whenever app bundle is updated\n                      new webpack.optimize.CommonsChunkPlugin({\n                        name: 'manifest',\n                        minChunks: Infinity\n                      }),\n                      // This instance extracts shared chunks from code splitted chunks and bundles them\n                      // in a separate chunk, similar to the vendor chunk\n                      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk\n                      new webpack.optimize.CommonsChunkPlugin({\n                        name: 'app',\n                        async: 'vendor-async',\n                        children: true,\n                        minChunks: 3\n                      }),\n                  \n                    // copy custom static assets\n                    new CopyWebpackPlugin([\n                      {\n                        from: path.resolve(__dirname, '../static'),\n                        to: config.build.assetsSubDirectory,\n                        ignore: ['.*']\n                      }\n                    ])\n                5.2.3.3 修改:K:\\9vuex_store\\config\\index.js\n                  assetsSubDirectory: 'static' ===> assetsSubDirectory: '/',\n    5.3 修改输出\n       5.3.1 修改main.js文件，输出自己的组件即可使用\n            //VueWgWCounter来自于webpack.prod.conf.js中的配置library:'VueWgWCounter',\n            import VueWgWCounter from './components/outter'\n            export default VueWgWCounter\n    5.4 切换到工程目录打包\n        npm run build\n    5.5 删除：K:\\9vuex_store\\.gitignore 中的 /dist/\n    5.6 发布：npm publish\n    \n       \n","readmeFilename":"README.md"}