1、理解Vuex

1.1、Vuex是什麼？

在Vue中實現集中式狀態（資料）管理的一個Vue外掛，對vue應用中多個元件的共享狀態進行集中式的管理（讀/寫），也是一種元件間通訊的方式，且適用於任意元件間通訊。

1.2.何時使用？

多個元件需要共享資料時

1.3.Vuex工作原理

1，具體流程：
外掛裡呼叫dispatch方法去找Actions，然後Actions裡幫你呼叫commit找Mutations，然後由Mutations去呼叫Mutate去找State，然後State修改資料後重新渲染元件。

2，就像去餐廳吃飯的流程：客人->服務員->後廚->菜->你

2、搭建vuex環境

①建立檔案：src/store/index.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex外掛
Vue.use(Vuex)

//準備actions物件——響應元件中使用者的動作
const actions = {}
//準備mutations物件——修改state中的資料
const mutations = {}
//準備state物件——儲存具體的資料
const state = {}

//建立並暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})
 

②在main.js中建立vm時傳入store配置項

在vue腳手架裡，它會掃描程式碼裡所有的import，先執行所有的引入操作，然後再執行其它的程式碼，包括使用等，所以，在兩個import之間存在其它程式碼也不會打斷它會先執行所有improt引入操作。

......
//引入store
import store from './store'
......

//建立vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})