# 1-1.Vue外送平台App-(使用Vuex狀態管理模式)
* Vuex:是全局變數，任何組件都可以用

### 簡要介紹vuex原理
> 簡要介紹各模組在流程中的主要功能：
* Vue Components：Vue元件。HTML頁面上，負責接收使用者操作等互動行為，執行dispatch方法觸發對應action進行迴應。
* dispatch：操作行為觸發方法，是唯一能執行action的方法。
* actions：操作行為處理模組,由元件中的$store.dispatch('action 名稱', data1)來觸發。然後由commit()來觸發mutation的呼叫 , 間接更新 state。負責處理Vue Components接收到的所有互動行為。包含同步/非同步操作，支援多個同名方法，按照註冊的順序依次觸發。向後臺API請求的操作就在這個模組中進行，包括觸發其他action以及提交mutation的操作。該模組提供了Promise的封裝，以支援action的鏈式觸發。
* commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。
* mutations：狀態改變操作方法，由actions中的commit('mutation 名稱')來觸發。是Vuex修改state的唯一推薦方法。該方法只能進行同步操作，且方法名只能全域性唯一。操作之中會有一些hook暴露出來，以進行state的監控等。
* state：頁面狀態管理容器物件。集中儲存Vue components中data物件的零散資料，全域性唯一，以進行統一的狀態管理。頁面顯示所需的資料從該物件中進行讀取，利用Vue的細粒度資料響應機制來進行高效的狀態更新。
* getters：state物件讀取方法。圖中沒有單獨列出該模組，應該被包含在了render中，Vue Components通過該方法讀取全域性state物件。
### 創建所需js
index:
Vuex最核心的管理對象store

state:
狀態對象

getters:
包含多個，基於state的getters計算屬性的對象

actions:
1.通過mutations間接更新state.js的多個方法對象
2.從後臺交互的異步(ajax)api資料回到給actions

mutation-types:
包含n個mutations的type常量名稱

mutations:
直接更新state多個方法的對象

---
### index.js /*vuex最核心的管理*/
* vuex最核心的管理對象store
* 先把整體收容近來

/*Vuex最核心的管理對象store*/
import Vue from 'vue';
import Vuex from 'vuex';
//引入我們自定義的模塊
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

//聲明使用的三方插件
Vue.use(Vuex);

export default new Vuex.Store({
    //配置對象
    state,
    mutations,
    actions,
    getters
})

### state.js /*狀態對象*/
* 先把需要管理的狀態數據一一列出來
* 此圖有三個地方的狀態(state)數據需要管理
Miste(首頁圖)

//名稱必須與街口api/index.js名稱一樣

//要先把需要的結構初始化
export default {
    latitude:'40.10038',//緯度
    longitude:'116.36867',//經度
    address:{},//地址
    categorys:[],//分類數組
    shops:[] //商家數組
}

### 3. mutation-types.js
>在state.js資料夾中這三個值會從後台獲取返回數據
，所以必須重新附於新值
* address:{},//地址
* categorys:[],//分類數組
* shops:[] //商家數組

/*包含n個mutations的type常量名稱*/

export const RECEIVE_ADDRESS = 'receive_address' //接收地址對象
export const RECEIVE_CATEGORYS = 'receive_categorys'//接收分類數組
export const RECEIVE_SHOPS = 'receive_shops'//接收商家數組

### 4.mutation.js

/*直接更新state多個方法的對象*/

import {
    RECEIVE_ADDRESS,
    RECEIVE_CATEGORYS,
    RECEIVE_SHOPS
} from './mutation-types';

export default {
    //actions跟mutations交互的是一個包含數據的對象"{address}"
    [RECEIVE_ADDRESS](state, {address}){
        state.address = address
    },
    [RECEIVE_CATEGORYS](state, {categorys}){
        state.categorys = categorys
    },
    [RECEIVE_SHOPS](state ,{shops}){
        state.shops = shops
    },

}

### 6.actions.js

/*
1.通過mutations間接更新state.js的多個方法對象
2.從後臺交互的異步(ajax)api資料回到給actions
*/

import {
    RECEIVE_ADDRESS,
    RECEIVE_CATEGORYS,
    RECEIVE_SHOPS
} from './mutation-types';
import {
    reqAddress,
    reqFoodCategorys,
    reqShops
} from '../api'


export default {
    //.異步獲取地址
    async getAddress({ commit, state }) {
        //發送異步ajax請求
        const geohash = state.latitude + ',' + state.longitude
        const result = await reqAddress(geohash)
        //提交一個mutation
        if (result.code === 0) {
            const address = result.data
            commit(RECEIVE_ADDRESS, { address })
        }
    },
    //.異步獲取分類
    async getCategorys({ commit }) {
        //發送異步ajax請求
        const result = await reqFoodCategorys()
        //提交一個mutation
        if (result.code === 0) {
            const categorys = result.data
            commit(RECEIVE_CATEGORYS, { categorys })
        }
    },
    //.異步獲取商家列
    async getShops({ commit, state }) {
        //發送異步ajax請求
        const { longitude,latitude } = state
        const result = await reqShops({ longitude, latitude })
        //提交一個mutation
        if (result.code === 0) {
            const shops = result.data
            commit(RECEIVE_SHOPS, { shops })
        }
    }

}

### getters.js

### 註冊store
>main.js

import store from './store';

new Vue({
  el: '#app',
  render: h => h(App),
  store, //使用上vuex
})