9vuex_store 中文文档教程

Question

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: '' })
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