vuex一些易混淆概念

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 一样，在每个组件中直接使用了。

1. 封装扩展
   首先写一个组件，不用导出组件，直接写结构和样式即可：

2. 为了将其封装为扩展，需要用到node组件的写法，即建立个入口文件，将组件导出，为此，结构目录长成这样：

   
   
   
3. 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 组件的写法，理解这个就简单了。

4. 接下来，我们就可以用这个封装好的 loading 效果扩展组件了：

// main.js
import Loading from './components/Loading' // 引入Loading.vue
Vue.use(Loading);  // 使用扩展

5. 在任何组件中，都可以直接使用 loading 扩展，而不用 import 引入组件了：

// App.vue

4. import 和 require 的使用场景：

由于 webpack 是模块加载器，所以在写 vue 的时候，使用 import 和 require 都可以，import 更多的是引入功能组件，并且用法灵活，而 require 就是引入文件。

• 两者的用法其实取决于组件的封装形式；
• 还有一种特殊情况，就是引入静态资源，例如CSS 或者 图片等，这时候就要用 require；
  两者是两种概念，放在一起比较难免不妥，只是有时候会混淆，建议看下 ES 6 中，import 的相关知识，就能看出和 require 的使用区别了。

---

虽然文章没啥技术含量，不过转载请注明出处，谢谢啦