调整详情: 调整状态管理

@@ -31,11 +31,13 @@ import { createNamespacedHelpers } from 'vuex';
 
 import ImgSize from '../../../components/img-size';
 import ActionSheet from './action-sheet';
+import stateShortCutsMixins from '../mixins';
 
 const { mapActions, mapGetters } = createNamespacedHelpers('product');
 
 export default {
   name: 'BuySheet',
+  mixins: [stateShortCutsMixins],
   components: {
     ImgSize,
     ActionSheet,

@@ -29,11 +29,13 @@ import { createNamespacedHelpers } from 'vuex';
 import LayoutApp from '../../../components/layout/layout-app';
 import SizeList from './size-list';
 import ActionSheet from './action-sheet';
+import stateShortCutsMixins from '../mixins';
 
-const { mapActions, mapGetters } = createNamespacedHelpers('product');
+const { mapActions } = createNamespacedHelpers('product');
 
 export default {
   name: 'SizeRequest',
+  mixins: [stateShortCutsMixins],
   components: {
     LayoutApp,
     SizeList,
@@ -48,7 +50,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['productDetail']),
     sizeList() {
       return get(this.productDetail, 'goods_list[0].size_list', null);
     },

@@ -36,7 +36,7 @@ import ActionSheet from './action-sheet';
 import ImgSize from '../../../components/img-size';
 import SizeList from './size-list';
 
-const { mapActions, mapGetters } = createNamespacedHelpers('product');
+const { mapActions, mapState } = createNamespacedHelpers('product');
 
 export default {
   name: 'SizeSelectSheet',
@@ -71,7 +71,14 @@ export default {
     'action-sheet': ActionSheet,
   },
   computed: {
-    ...mapGetters(['selectedSize']),
+    ...mapState(['selectedProductInfo']),
+    selectedSize() {
+      if (this.selectedProductInfo.productId === this.product.product_id) {
+        return this.selectedProductInfo.size;
+      }
+
+      return {};
+    },
     goods_name() {
       return get(this.product, 'goods_list[0].goods_name', '');
     },

+import {createNamespacedHelpers} from 'vuex';
+
+const { mapState, mapActions } = createNamespacedHelpers('product');
+
+export default {
+  computed: {
+    ...mapState(['products', 'fav', 'topLists']),
+    productDetail() {
+      this.ensureProduct({ productId: this.productId });
+
+      return this.products[this.productId];
+    },
+    imageList() {
+      return this.productDetail.goods_list[0].image_list;
+    },
+    resource() {
+      return this.productDetail.resource;
+    },
+    activity() {
+      return this.productDetail.activity;
+    },
+    isFav() {
+      return this.fav[this.productId];
+    },
+    topList() {
+      return this.topLists[this.productId];
+    },
+    recommend() {
+      return this.productDetail.recommend;
+    },
+  },
+  methods: {
+    ...mapActions(['ensureProduct']),
+  },
+};

@@ -104,11 +104,14 @@ import SizeSelectSheet from './components/size-select-sheet';
 import SizeRequestSheet from './components/size-request-sheet';
 import BuySheet from './components/buy-sheet';
 import TopList from './components/top-list';
+import stateShortCutsMixins from './mixins';
+
+const { mapActions } = createNamespacedHelpers('product');
 
-const { mapActions, mapGetters } = createNamespacedHelpers('product');
 
 export default {
   name: 'ProductDetail',
+  mixins: [stateShortCutsMixins],
   components: {
     SizeSelectSheet,
     ActivityListSheet,
@@ -144,7 +147,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['productDetail', 'isFav', 'topList', 'imageList', 'resource', 'activity', 'recommend']),
     productDec() {
       const goods = get(this.productDetail, 'goods_list[0]', {});
 

@@ -3,6 +3,9 @@ import { get } from 'lodash';
 import Vue from 'vue';
 
 export default {
+  ensureProduct({ commit }, { productId }) {
+    commit(Types.ENSURE_PRODUCT_DETAIL, { productId });
+  },
   async fetchProductInfo({ commit }, { productId }) {
     const queryTasks = ['', '/resource', '/activity', '/recommend'].map(path => {
       let params = { product_id: productId };

 import actions from './actions';
 import mutations from './mutations';
 
+export function defaultProduct() {
+  return {
+    brand_name: '',
+    canPublishSecondHand: false,
+    gender: '通用',
+    goods_list: [
+      {
+        canAddSize: false,
+        color_name: '',
+        goods_id: null,
+        goods_name: '-',
+        image_list: [
+        ],
+        size_list: [
+        ]
+      }
+    ],
+    least_price: null,
+    max_price: null,
+    max_sort_id: null,
+    min_price: null,
+    offer_price: null,
+    product_code: null,
+    product_id: null,
+    product_name: null,
+    sale_time: null,
+    sellerCanPublish: true,
+    series_name: null,
+    shelve_status: null,
+    resource: null,
+    activity: [],
+    recommend: [],
+    top3: [],
+  };
+}
+
 export function defaultState() {
   return {
-    product: {
-      brand_name: '',
-      canPublishSecondHand: false,
-      gender: '通用',
-      goods_list: [
-        {
-          canAddSize: false,
-          color_name: '',
-          goods_id: null,
-          goods_name: '-',
-          image_list: [
-          ],
-          size_list: [
-          ]
-        }
-      ],
-      least_price: null,
-      max_price: null,
-      max_sort_id: null,
-      min_price: null,
-      offer_price: null,
-      product_code: null,
-      product_id: null,
-      product_name: null,
-      sale_time: null,
-      sellerCanPublish: true,
-      series_name: null,
-      shelve_status: null,
-      resource: null,
-      activity: [],
-      recommend: [],
-      top3: [],
-    },
-    topList: {},
+    products: {},
+    topLists: {},
     fav: {},
 
     /**
@@ -63,31 +67,5 @@ export default function() {
     state: defaultState(),
     mutations,
     actions,
-    getters: {
-      productDetail(state) {
-        return state.product;
-      },
-      imageList(state) {
-        return state.product.goods_list[0].image_list;
-      },
-      resource(state) {
-        return state.product.resource;
-      },
-      activity(state) {
-        return state.product.activity;
-      },
-      isFav(state) {
-        return state.fav[state.product.product_id];
-      },
-      topList(state) {
-        return state.topList[state.product.product_id];
-      },
-      recommend(state) {
-        return state.product.recommend;
-      },
-      selectedSize(state) {
-        return state.selectedProductInfo.size;
-      }
-    }
   };
 }

 import * as Types from './types';
 import { find } from 'lodash';
 
+import { defaultProduct } from './index';
+
+function ensureProduct(state, productId) {
+  if (state.products[productId] === undefined) {
+    state.products = {...state.products, [productId]: defaultProduct()};
+  }
+}
 function ensureSelectedProduct(state, productId) {
   if (!state.selectedProductInfo || state.selectedProductInfo.productId !== productId) {
+    ensureProduct(state, productId);
+
     state.selectedProductInfo = {
       productId,
-      product: state.product,
+      product: state.products[productId],
       sizeId: null,
       storageId: null,
       size: {},
@@ -14,12 +23,15 @@ function ensureSelectedProduct(state, productId) {
 }
 
 export default {
+  [Types.ENSURE_PRODUCT_DETAIL](state, { productId }) {
+    ensureProduct(state, productId);
+  },
   [Types.UPDATE_PRODUCT_DETAIL](state, payload) {
-    state.product = payload;
+    state.products = {...state.products, [payload.product_id]: payload};
     ensureSelectedProduct(state, state.product.product_id);
   },
   [Types.UPDATE_PRODUCT_TOP3](state, { productId, topList }) {
-    state.topList = {...state.topList, [productId]: topList};
+    state.topLists = {...state.topLists, [productId]: topList};
   },
   [Types.UPDATE_PRODUCT_FAV](state, { productId, isFav }) {
     state.fav = {...state.fav, [productId]: isFav};

 export const UPDATE_PRODUCT_DETAIL = 'UPDATE_PRODUCT_DETAIL';
+export const ENSURE_PRODUCT_DETAIL = 'ENSURE_PRODUCT_DETAIL';
 export const UPDATE_PRODUCT_FAV = 'UPDATE_PRODUCT_FAV';
 export const UPDATE_SELECTED_PRODUCT_SIZE = 'UPDATE_SELECTED_PRODUCT_SIZE';
 export const UPDATE_PRODUCT_TOP3 = 'UPDATE_PRODUCT_TOP3';