vue-cli是一個Vue.js官方的CLI工具，可用于快速搭建Vue項目，并提供了豐富的配置選項。可以提供開發(fā)服務(wù)器、本地打包開發(fā)和生產(chǎn)環(huán)境打包等功能。在使用vue-cli創(chuàng)建的項目中全局安裝了Vue.js以及webpack-dev-server和一些必需依賴關(guān)系以及檢查瀏覽器版本的插件EsLint等。

但在實(shí)際應(yīng)用中，當(dāng)應(yīng)用變得特別大、復(fù)雜和多變的時候，我們需要更好的多狀態(tài)管理方式，來更好地管理我們vue.js應(yīng)用的狀態(tài)數(shù)據(jù)。Vuex作為vue.js官方的狀態(tài)管理方案，提供了方便的Flux架構(gòu)實(shí)現(xiàn)，是基于Vue.js的一個專門為狀態(tài)管理設(shè)計的庫。并且具有如下特點(diǎn)：

- 集中式管理應(yīng)用所有組件的狀態(tài)，避免不同組件間狀態(tài)重復(fù)的問題。
- 為了解決狀態(tài)修改的耗時問題 Vue.js 內(nèi)建了異步操作 API，Vuex也提供了類似。
- 發(fā)現(xiàn)問題更容易，因為我們知道修改狀態(tài)的具體位置，和每個狀態(tài)是從哪個頁面的什么地方修改的，也就更容易去debug了。 
- 使代碼更清晰，更易于維護(hù)，尤其是涉及多個組件共享狀態(tài)時，修改這個狀態(tài)比較方便，同時也容易被跟蹤。

Vuex的核心就是store，store的結(jié)構(gòu)可以簡單示例如下：

// state用于存儲數(shù)據(jù)，mutation實(shí)現(xiàn)對state進(jìn)行修改，action用來提交mutation，getter可以在組件外部獲取store文件中state中的值
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

用commit觸發(fā)一次mutation：

store.commit('increment')

但是需要注意的是，mutation 必須是同步函數(shù)， 執(zhí)行action時，你可以異步調(diào)用一個mutation，只需在action中簡單地 commit 一下即可。

const actions = {
incrementAsync ({ commit }) {
setTimeout(() =>{
commit('increment')
}, 1000)
}
}

這是一個簡單的Vuex的例子，掌握了一般的Vuex結(jié)構(gòu)和使用方法后，我們可以根據(jù)實(shí)際情況靈活運(yùn)用Vuex來管理一個vue.js應(yīng)用的狀態(tài)。