9vuex_store

A Vue.js project

Usage no npm install needed!

<script type="module">
  import vuexStore from 'https://cdn.skypack.dev/9vuex_store';
</script>

README

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