完成管理从后台获取到的mock数据的vuex配置

LiCiMaKaKa · Aug 1, 2018 · a2ee282 · a2ee282
1 parent 357c73d
commit a2ee282
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 11 deletions.
diff --git a/mintshop-client/src/api/index.js b/mintshop-client/src/api/index.js
@@ -42,12 +42,12 @@ export const reqLogout = () => ajax(BASE_URL + '/logout')
 /**
  * 获取商家信息(下列请求由mock拦截并返回 不需要代理)
  */
-export const reqShopInfo = () => ajax('/shop_info')
+export const reqShopInfo = () => ajax('/info')
 /**
  * 获取商家评价数组
  */
-export const reqShopRatings = () => ajax('/shop_ratings')
+export const reqShopRatings = () => ajax('/ratings')
 /**
  * 获取商家商品数组
  */
-export const reqShopGoods = () => ajax('/shop_goods')
+export const reqShopGoods = () => ajax('/goods')
diff --git a/mintshop-client/src/pages/Shop/Shop.vue b/mintshop-client/src/pages/Shop/Shop.vue
@@ -21,6 +21,9 @@
 <script>
 import ShopHeader from '../../components/ShopHeader/ShopHeader.vue'
 export default {
+  mounted () {
+    this.$store.dispatch('getShopInfo')
+  },
   components: {
     ShopHeader
   }

diff --git a/mintshop-client/src/store/actions.js b/mintshop-client/src/store/actions.js
@@ -8,14 +8,20 @@ import {
   reqCategorys,
   reqShops,
   reqUserInfo,
-  reqLogout
+  reqLogout,
+  reqShopRatings,
+  reqShopGoods,
+  reqShopInfo
 } from '../api'
 import {
   RECEIVE_ADDRESS,
   RECEIVE_CATEGORYS,
   RECEIVE_SHOPS,
   RECEIVE_USER_INFO,
-  RESET_USER_INFO
+  RESET_USER_INFO,
+  RECEIVE_GOODS,
+  RECEIVE_RATINGS,
+  RECEIVE_INFO
 } from './mutation-types'
 export default {
   // 异步获取地址
@@ -70,5 +76,31 @@ export default {
   async logout ({commit}) {
     const result = await reqLogout()
     if (result.code === 0) { commit(RESET_USER_INFO) }
+  },
+  // 异步获取商家信息
+  async getShopInfo ({commit}) {
+    const result = await reqShopInfo()
+    if (result.code === 0) {
+      const info = result.data
+      commit(RECEIVE_INFO, {info})
+    }
+  },
+
+  // 异步获取商家评价列表
+  async getShopRatings ({commit}) {
+    const result = await reqShopRatings()
+    if (result.code === 0) {
+      const ratings = result.data
+      commit(RECEIVE_RATINGS, {ratings})
+    }
+  },
+
+  // 异步获取商家商品列表
+  async getShopGoods ({commit}) {
+    const result = await reqShopGoods()
+    if (result.code === 0) {
+      const goods = result.data
+      commit(RECEIVE_GOODS, {goods})
+    }
   }
 }
diff --git a/mintshop-client/src/store/mutation-types.js b/mintshop-client/src/store/mutation-types.js
@@ -6,3 +6,7 @@ export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收分类数组
 export const RECEIVE_SHOPS = 'receive_shops' // 接收商家数组
 export const RECEIVE_USER_INFO = 'receive_user_info' // 接收用户信息
 export const RESET_USER_INFO = 'reset_user_info' // 重置用户信息
+
+export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组
+export const RECEIVE_RATINGS = 'receive_ratings' // 接收商家评价数组
+export const RECEIVE_INFO = 'receive_info' // 接收商家信息
diff --git a/mintshop-client/src/store/mutations.js b/mintshop-client/src/store/mutations.js
@@ -6,7 +6,10 @@ import {
   RECEIVE_CATEGORYS,
   RECEIVE_SHOPS,
   RECEIVE_USER_INFO,
-  RESET_USER_INFO} from './mutation-types'
+  RESET_USER_INFO,
+  RECEIVE_INFO,
+  RECEIVE_RATINGS,
+  RECEIVE_GOODS} from './mutation-types'
 // [方法名](state,{param}){}
 export default {
   [RECEIVE_ADDRESS] (state, {address}) {
@@ -23,5 +26,16 @@ export default {
   },
   [RESET_USER_INFO] (state) {
     state.userInfo = {}
+  },
+  [RECEIVE_INFO] (state, {info}) {
+    state.info = info
+  },
+
+  [RECEIVE_RATINGS] (state, {ratings}) {
+    state.ratings = ratings
+  },
+
+  [RECEIVE_GOODS] (state, {goods}) {
+    state.goods = goods
   }
 }
diff --git a/mintshop-client/src/store/state.js b/mintshop-client/src/store/state.js
@@ -7,5 +7,8 @@ export default {
   address: {}, // 地址相关信息对象
   categorys: [], // 食品分类数组
   shops: [], // 商家数组
-  userInfo: {} // 用户信息
+  userInfo: {}, // 用户信息
+  goods: [], // 商品列表
+  ratings: [], // 商家评价列表
+  info: {} // 商家信息
 }
diff --git a/项目开发流程.md b/项目开发流程.md
@@ -2344,16 +2344,77 @@ Mock.mock('/info', {code: 0, data: data.info})
    /*
     * 获取商家信息(下列请求由mock拦截并返回 不需要代理)
     */
-   export const reqShopInfo = () => ajax('/shop_info')
+   export const reqShopInfo = () => ajax('/info')
    /**
     * 获取商家评价数组
     */
-   export const reqShopRatings = () => ajax('/shop_ratings')
+   export const reqShopRatings = () => ajax('/ratings')
    /**
     * 获取商家商品数组
     */
-   export const reqShopGoods = () => ajax('/shop_goods')
+   export const reqShopGoods = () => ajax('/goods')
    ```
 
-2. 再写一套vuex的配置
+2. 再写一套用来管理从后台接收到的数据vuex配置
 
+   ```javascript
+   // 1. state
+   goods: [], // 商品列表
+   ratings: [], // 商家评价列表
+   info: {} // 商家信息
+   
+   // 2. mutations-type
+   export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组
+   export const RECEIVE_RATINGS = 'receive_ratings' // 接收商家评价数组
+   export const RECEIVE_INFO = 'receive_info' // 接收商家信息
+   
+   // 3. mutations
+   [RECEIVE_INFO] (state, {info}) {
+     state.info = info
+   },
+   
+   [RECEIVE_RATINGS] (state, {ratings}) {
+     state.ratings = ratings
+   },
+   
+   [RECEIVE_GOODS] (state, {goods}) {
+     state.goods = goods
+   }
+   
+   // 4. action
+   // 异步获取商家信息
+     async getShopInfo ({commit}) {
+       const result = await reqShopInfo()
+       if (result.code === 0) {
+         const info = result.data
+         commit(RECEIVE_INFO, {info})
+       }
+     },
+   
+     // 异步获取商家评价列表
+     async getShopRatings ({commit}) {
+       const result = await reqShopRatings()
+       if (result.code === 0) {
+         const ratings = result.data
+         commit(RECEIVE_RATINGS, {ratings})
+       }
+     },
+   
+     // 异步获取商家商品列表
+     async getShopGoods ({commit}) {
+       const result = await reqShopGoods()
+       if (result.code === 0) {
+         const goods = result.data
+         commit(RECEIVE_GOODS, {goods})
+       }
+     }
+   ```
+
+3. 在shop.vue中测试获取商家信息数据
+
+   ```javascript
+   // 可以在控制台的vuex中查看到info数据
+   mounted () {
+   	this.$store.dispatch('getShopInfo')
+   }
+   ```