# vuex-demo

> A Vue.js project

Latest version **1.0.0** (published 2018-12-04) · 0 weekly downloads

## Install

```sh
npm install vuex-demo
pnpm add vuex-demo
yarn add vuex-demo
bun add vuex-demo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-12-04 |
| First published | 2018-12-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Unpacked size | 669.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | YINXIULONG |
| Maintainers | yinxiulong |

## Links

- npm: https://www.npmjs.com/package/vuex-demo
- npm.io page: https://npm.io/package/vuex-demo

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [vuex](https://npm.io/package/vuex.md) ^3.0.1

## Recent versions

- 1.0.0 (latest) — 2018-12-04

## README

# vuex-demo

> A Vue.js project

## Build Setup

```bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

# Vuex 

```bash
    1. 什么情况下使用vuex
        虽然vuex 可以帮助我们管理共享状态，但也附带了更多概念和框架，这需要对短期和长期效益进行权衡
        如果你不打算开发大型单页面应用，使用vuex 可能是繁琐冗余的，
    2. vux 状态管理
        view -> (dispatch)Action ->(Commit) Mutations ->(Mutate) State -> View
        注意： Action 不是必须品，如果有异步操作才可能用到Action，否则可以不使用Action
    3. Actions:
        Action 提交的是Mutation ,而不是直接更改状态
        Action 可以包含任意异步操作
    4. 提取Stroe 为公共代码
       在src 创建stroe 文件夹
       同router 提取一样
```

## Npm 包的发布 
>1.  在官网注册账号
        https://www.npmjs.com

>2. 在cmd 窗口
        npm login

        Username: yinxiulong
        Password:
        Email: (this IS public) yinxiulong@aliyun.com
        Logged in as yinxiulong on https://registry.npmjs.org/.
        表示登录成功！

>3. 创建自己的组件
```javascript
 1.初始化项目
       2.修改package.json
          private : true ->false
         "main": "dist/vue-vuex.min.js ", // main表示入口  vuex打包后的名字
       3.删除webpack.prod.config.js 不需要的代码块
 
         ,
        // 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'
        }),
         // keep module.id stable when vendor modules does not change
        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: ['.*']
        }
        ])
        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
            })
            )
         }
         
        if (config.build.bundleAnalyzerReport) {
        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
        }
```

     
>4. 修改默认的
```js
            // 修改路径
            output:{
                path:config.build.assetsRoot,
                publicPath:config.build.assetsPublicPath,
                filename:'vue-vuex.min.js',
                library:'VueCounter',
                libraryTarget:'umd'
            },
```
   
>5. config/index.js 
```js
          修改     
          assetsSubDirectory: 'static'  -->    assetsSubDirectory: '/',

```



>6. 修改mian.js

>7. 删除.gitgnore  中
    /dist/

---
_Source: https://npm.io/package/vuex-demo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._