vuex 是針對 vue 而設(shè)計(jì)的狀態(tài)管理擴(kuò)展雇锡，你可以理解為 react 中的 Redux，和 flux 的衍生物僚焦。本文并不是詳細(xì)教程锰提，是介紹使用 vuex 中，一些讓人迷惑的點(diǎn)的文章，因?yàn)榇蠖鄶?shù)人為了快速使用 vuex立肘，而選擇看視頻或者不求甚解地閱讀文檔边坤，但是當(dāng)深入做項(xiàng)目時，難免會有幾個點(diǎn)會不禁要問自己幾個為什么：
1. 使用 dispatch 還是 commit 谅年？
在vue 組件中（Child.vue）茧痒，我們會給定一個方法，通過這個方法使用 dispatch 觸發(fā) action 從而提交相應(yīng)的 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ū)別耸峭，當(dāng)需要異步桩蓉，或者其他復(fù)雜操作時淋纲，dispatch 就更加適用，因?yàn)?mutation 是同步改變狀態(tài)的院究，無法執(zhí)行異步操作洽瞬，而 dispatch 的含義是“先觸發(fā)action”，經(jīng)過 action 你可以執(zhí)行異步操作业汰，actionA 和 actionB 之間的先后順序等等伙窃，而在組件中直接 commit 無法執(zhí)行一系列復(fù)雜操作。
2. 向 dispatch 和 commit 傳遞參數(shù)：
在寫項(xiàng)目的時候样漆，由于之前寫項(xiàng)目空檔時間較長为障，很多基礎(chǔ)知識都給忽略了，在給 dispatch 傳遞參數(shù)的時候放祟，直接就用形參的形式傳遞了參數(shù)：
this.$store.dispatch('showA', id);
雖然結(jié)果證明可以生效鳍怨，因?yàn)榈讓影b的時候就是將第二個參數(shù)以對象形式傳遞的，但是當(dāng)多個參數(shù)的時候不確定會不會出錯跪妥，并沒有試驗(yàn)鞋喇，這里只給出官方文檔的寫法，畢竟用了這個框架眉撵，就按照標(biāo)準(zhǔn)來：
// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
amount: 10
})
// 以對象形式分發(fā)
store.dispatch({
type: 'incrementAsync',
amount: 10
})
3. 如果一個組件侦香，多次在其他組件中出現(xiàn)，是否每次都要 import 引入一遍呢纽疟？
當(dāng)然可以每次都引入罐韩，不過還有一種更簡單的方法，就是將這個組件用 vue 擴(kuò)展的方式封裝污朽，然后就可以像使用 vuex 或者 vue-router 一樣散吵，在每個組件中直接使用了。
- 封裝擴(kuò)展
首先寫一個組件，不用導(dǎo)出組件错蝴，直接寫結(jié)構(gòu)和樣式即可：
<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>
-
為了將其封裝為擴(kuò)展洲愤，需要用到node組件的寫法，即建立個入口文件顷锰，將組件導(dǎo)出柬赐，為此，結(jié)構(gòu)目錄長成這樣：
- ok官紫，現(xiàn)在來寫index入口文件：
const LoadingComponent = require('./Loading.vue')
const loading = {
install: function(Vue) {
Vue.component('loading', LoadingComponent)
}
}
module.exports = loading
require 是引入剛才寫的組件肛宋，loading對象是封裝 vue 擴(kuò)展的寫法，具體的可以參考文檔束世，install 屬性就是為了封裝擴(kuò)展而存在的酝陈，而 module.exports 是導(dǎo)出組件，遵循的是 commonJS 規(guī)范毁涉，想具體了解可以看看 nodeJS入門沉帮，了解下 nodeJS 組件的寫法，理解這個就簡單了贫堰。
- 接下來穆壕，我們就可以用這個封裝好的 loading 效果擴(kuò)展組件了：
// main.js
import Loading from './components/Loading' // 引入Loading.vue
Vue.use(Loading); // 使用擴(kuò)展
- 在任何組件中，都可以直接使用 loading 擴(kuò)展其屏，而不用 import 引入組件了：
// App.vue
<loading v-if="loading"></loading>
4. import 和 require 的使用場景：
由于 webpack 是模塊加載器喇勋，所以在寫 vue 的時候，使用 import 和 require 都可以偎行，import 更多的是引入功能組件川背，并且用法靈活，而 require 就是引入文件蛤袒。
- 兩者的用法其實(shí)取決于組件的封裝形式熄云；
- 還有一種特殊情況，就是引入靜態(tài)資源汗盘，例如CSS 或者 圖片等皱碘，這時候就要用 require；
兩者是兩種概念隐孽，放在一起比較難免不妥癌椿，只是有時候會混淆，建議看下 ES 6 中菱阵，import 的相關(guān)知識踢俄，就能看出和 require 的使用區(qū)別了。
雖然文章沒啥技術(shù)含量晴及，不過轉(zhuǎn)載請注明出處都办，謝謝啦
