vuex 是针对 vue 而设计的状态管理扩展，你可以理解为 react 中的 Redux，和 flux 的衍生物。本文并不是详细教程，是介绍使用 vuex 中，一些让人迷惑的点的文章，因为大多数人为了快速使用 vuex，而选择看视频或者不求甚解地阅读文档，但是当深入做项目时，难免会有几个点会不禁要问自己几个为什么：
1. 使用 dispatch 还是 commit ？
在vue 组件中（Child.vue），我们会给定一个方法，通过这个方法使用 dispatch 触发 action 从而提交相应的 mutation，举个栗子：
methods: {
methods: {
show(id) {
if(id == 1) {
this.$store.dispatch('showA');
} else {
this.$store.dispatch('hideA');
}
}
}
methods: {
show(id) {
if(id == 1) {
this.$store.commit('SHOW_A'); // 使用大写是一种推荐命名写法，具体看文档
} else {
this.$store.commit('HIDE_A');
}
}
}
这两者，在处理简单的状态变化时，没有区别，当需要异步，或者其他复杂操作时，dispatch 就更加适用，因为 mutation 是同步改变状态的，无法执行异步操作，而 dispatch 的含义是“先触发action”，经过 action 你可以执行异步操作，actionA 和 actionB 之间的先后顺序等等，而在组件中直接 commit 无法执行一系列复杂操作。
2. 向 dispatch 和 commit 传递参数：
在写项目的时候，由于之前写项目空档时间较长，很多基础知识都给忽略了，在给 dispatch 传递参数的时候，直接就用形参的形式传递了参数：
this.$store.dispatch('showA', id);
虽然结果证明可以生效，因为底层包装的时候就是将第二个参数以对象形式传递的，但是当多个参数的时候不确定会不会出错，并没有试验，这里只给出官方文档的写法，毕竟用了这个框架，就按照标准来：
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
3. 如果一个组件，多次在其他组件中出现，是否每次都要 import 引入一遍呢？
当然可以每次都引入，不过还有一种更简单的方法，就是将这个组件用 vue 扩展的方式封装，然后就可以像使用 vuex 或者 vue-router 一样，在每个组件中直接使用了。
- 封装扩展
首先写一个组件，不用导出组件，直接写结构和样式即可：
<template>
<div class="loading">
<div class="loading-inner">
<div class="ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</template>
<style scoped>
.loading{
position: fixed;
z-index: 1000;
width:100%;
height:90px;
}
.loading-inner{
display:flex;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
}
@-webkit-keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-spin-fade-loader {
position: relative; }
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
animation: ball-spin-fade-loader 1s 0s infinite linear; }
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
.ball-spin-fade-loader > div {
background-color: #5477b2;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
</style>
-
为了将其封装为扩展，需要用到node组件的写法，即建立个入口文件，将组件导出，为此，结构目录长成这样：
- ok，现在来写index入口文件：
const LoadingComponent = require('./Loading.vue')
const loading = {
install: function(Vue) {
Vue.component('loading', LoadingComponent)
}
}
module.exports = loading
require 是引入刚才写的组件，loading对象是封装 vue 扩展的写法，具体的可以参考文档，install 属性就是为了封装扩展而存在的，而 module.exports 是导出组件，遵循的是 commonJS 规范，想具体了解可以看看 nodeJS入门，了解下 nodeJS 组件的写法，理解这个就简单了。
- 接下来，我们就可以用这个封装好的 loading 效果扩展组件了：
// main.js
import Loading from './components/Loading' // 引入Loading.vue
Vue.use(Loading); // 使用扩展
- 在任何组件中，都可以直接使用 loading 扩展，而不用 import 引入组件了：
// App.vue
<loading v-if="loading"></loading>
4. import 和 require 的使用场景：
由于 webpack 是模块加载器，所以在写 vue 的时候，使用 import 和 require 都可以，import 更多的是引入功能组件，并且用法灵活，而 require 就是引入文件。
- 两者的用法其实取决于组件的封装形式；
- 还有一种特殊情况，就是引入静态资源，例如CSS 或者 图片等，这时候就要用 require；
两者是两种概念，放在一起比较难免不妥，只是有时候会混淆，建议看下 ES 6 中，import 的相关知识，就能看出和 require 的使用区别了。
虽然文章没啥技术含量，不过转载请注明出处，谢谢啦
