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 的使用區別了。
雖然文章沒啥技術含量，不過轉載請注明出處，謝謝啦
