原則:

　　 中小型項(xiàng)目中，如果組件的公共狀態(tài)不多的情況下，不建議使用vuex，反而會(huì)增加代碼復(fù)雜度，想要組件通信，直接通過(guò)event bus即可，中大型項(xiàng)目中，多個(gè)組件公共狀態(tài)較多情況下，建議使用vuex

　　vuex的具體工作流程如下:

　　 在倉(cāng)庫(kù)state中定義公共狀態(tài)，action中發(fā)送異步請(qǐng)求，得到數(shù)據(jù)后調(diào)用mutation 賦值給state,組件中使用state,也可以在組件中 dispatch action和觸發(fā)mutation來(lái)修改state,視圖刷新

　　具體代碼如下：

　　倉(cāng)庫(kù)代碼

　　const store = new Vuex.Store({

　　state: {

　　items: [] // 定義一個(gè)公共的購(gòu)物車(chē)數(shù)據(jù)

　　},

　　getters: {

　　// 可以基于已有的state 派生新的狀態(tài)

　　selectedItems (state) {

　　// 過(guò)濾購(gòu)物車(chē)中未選中的商品

　　return state.items.filter(item => item.selected)

　　}

　　},

　　mutations: {

　　// 定義mutation來(lái)修改state

　　INIT_ITEMS(state, items){

　　state.items = items

　　}

　　},

　　actions: {

　　// action可以發(fā)送異步請(qǐng)求，得到數(shù)據(jù)后commit mutation將請(qǐng)求結(jié)果傳入

　　FETCH_ITEMS({commit}, params = {}){

　　// 調(diào)用封裝好的 接口函數(shù)

　　fetchItem(params).then(res => {

　　if(res.data.code === 200) {

　　commit('INIT_ITEMS', res.data.data)

　　}

　　})

　　}

　　}

　　})

　　組件中使用 使用vuex

　　// 獲取state

　　this.$store.state.items // 直接獲取

　　{

　　computed: {

　　...mapState(['items']) // 助手函數(shù)獲取

　　}

　　}

　　// 獲取getters

　　this.$store.getters.selectedItems // 直接獲取

　　{

　　computed: {

　　...mapGetters(['selectedItems']) // 助手函數(shù)獲取

　　}

　　}

　　// 組件中提交action

　　this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'})

　　{

　　methods: {

　　...mapActions(['FETCH_ITEMS']) // 助手函數(shù) 直接調(diào)用this.FETCH_ITEMS(params)觸發(fā)

　　}

　　}

　　// 組件中也可以直接commit mutation

　　this.$store.commit('INIT_ITEMS'[,參數(shù)])

　　{

　　methods:{

　　...mapMutations(['INIT_ITEMS']) // 助手函數(shù) 直接調(diào)用this.INIT_ITEMS(參數(shù))

　　}

　　}