vuex 是針對 vue 而設計的狀態(tài)管理擴展，你可以理解為 react 中的 Redux，和 flux 的衍生物。本文并不是詳細教程，是介紹使用 vuex 中，一些讓人迷惑的點的文章，因為大多數(shù)人為了快速使用 vuex，而選擇看視頻或者不求甚解地閱讀文檔，但是當深入做項目時，難免會有幾個點會不禁要問自己幾個為什么：

1. 使用 dispatch 還是 commit ？

在vue 組件中（Child.vue），我們會給定一個方法，通過這個方法使用 dispatch 觸發(fā) 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');
        }
    }
}

這兩者，在處理簡單的狀態(tài)變化時，沒有區(qū)別，當需要異步，或者其他復雜操作時，dispatch 就更加適用，因為 mutation 是同步改變狀態(tài)的，無法執(zhí)行異步操作，而 dispatch 的含義是“先觸發(fā)action”，經(jīng)過 action 你可以執(zhí)行異步操作，actionA 和 actionB 之間的先后順序等等，而在組件中直接 commit 無法執(zhí)行一系列復雜操作。

2. 向 dispatch 和 commit 傳遞參數(shù)：

在寫項目的時候，由于之前寫項目空檔時間較長，很多基礎知識都給忽略了，在給 dispatch 傳遞參數(shù)的時候，直接就用形參的形式傳遞了參數(shù)：

this.$store.dispatch('showA', id);

雖然結果證明可以生效，因為底層包裝的時候就是將第二個參數(shù)以對象形式傳遞的，但是當多個參數(shù)的時候不確定會不會出錯，并沒有試驗，這里只給出官方文檔的寫法，畢竟用了這個框架，就按照標準來：

// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
  amount: 10
})
// 以對象形式分發(fā)
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

3. 如果一個組件，多次在其他組件中出現(xiàn)，是否每次都要 import 引入一遍呢？

當然可以每次都引入，不過還有一種更簡單的方法，就是將這個組件用 vue 擴展的方式封裝，然后就可以像使用 vuex 或者 vue-router 一樣，在每個組件中直接使用了。

1. 封裝擴展
   首先寫一個組件，不用導出組件，直接寫結構和樣式即可：

<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>

2. 為了將其封裝為擴展，需要用到node組件的寫法，即建立個入口文件，將組件導出，為此，結構目錄長成這樣：

   
   
3. ok，現(xiàn)在來寫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 規(guī)范，想具體了解可以看看 nodeJS入門，了解下 nodeJS 組件的寫法，理解這個就簡單了。

4. 接下來，我們就可以用這個封裝好的 loading 效果擴展組件了：

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

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

// App.vue
<loading v-if="loading"></loading>

4. import 和 require 的使用場景：

由于 webpack 是模塊加載器，所以在寫 vue 的時候，使用 import 和 require 都可以，import 更多的是引入功能組件，并且用法靈活，而 require 就是引入文件。

• 兩者的用法其實取決于組件的封裝形式；
• 還有一種特殊情況，就是引入靜態(tài)資源，例如CSS 或者 圖片等，這時候就要用 require；
  兩者是兩種概念，放在一起比較難免不妥，只是有時候會混淆，建議看下 ES 6 中，import 的相關知識，就能看出和 require 的使用區(qū)別了。

雖然文章沒啥技術含量，不過轉載請注明出處，謝謝啦