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('|') +
')