前文我們講到，通過vue-cli3.x我們創建了項目news-list。項目gitee地址：
https://gitee.com/vuejslearn/news-list.git
本文，我們來簡單的分析vue-cli3是怎麼集成vuex的，我們打開項目目錄，發現一個文件：store/index.js，沒錯，這個就是vuex的初始模板。那他是怎麼被代碼使用的呢？原來，要是用vuex，我們需要首先安裝
npm install vuex --save
當然，如果我們通過vue-cli3進行創建項目的話，默認是給我們安裝好了的。然後必須顯式地通過 Vue.use() 來安裝調用 Vuex。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
最後，我們需要導出一個默認的store，來注入到vue中
// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
我們打開項目默認的vuex配置文件，發現就是上面的這些代碼：
這就是vue-cli3為我們創建項目後，出現的這個文件來源。最後，在vue的創建時(項目中的main.js文件)，注入store
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')這樣，vuex就注入到了vue中，我們在寫代碼時，就可以在store中定義我們的狀態了，然後全局都是可以使用的。
vuex的創建不要求具體按照某些目錄結構，我們可以把它放到任意目錄下，但一般的是寫一個總的配置文件，然後分模塊的寫每個模塊的state、getter等。這也是分模塊構建的思想，因為如果組件多，項目複雜的話，把所有的狀態放到一起，會使應用變得非常複雜和臃腫。
原創不容易，鑑於本人水平有限，文中如有錯誤之處歡迎大家指正。以後我會持續發佈vue實戰系列的文檔，喜歡的朋友歡迎關注。
分享到:
閱讀更多 溫馨的醬牛肉 的文章
