[聚焦Vue/React/Webpack]11 项目设计

组件和状态设计

• 框架（vue/react）的使用（和高级特性）是必要条件
• 独立负责项目？（考察设计设计能力）
• 面试必考（二三面）， 场景题
  • 数据驱动视图
  • 状态： 数据结构设计
  • 视图： 组件结构、拆分和组件通信

    React 设计todolist （组件结构， redux state 数据结构）

    设计原型图

    

    state数据结构设计

    this.state = {
    list: [{
     id: 1,
    title: '标题'，
    completed：false
    }]
    }

    组件设计

    外层负责汇总， 顶部组件负责输入， 底部组件负责显示（列表显示， 元素显示）

    <App>
    <Input />
    <List>
     <ListItem/>
    <ListItem/>
    <ListItem/>
    </List>
    </App>

    Vue 设计购物车（组件机构， vuex state 数据结构）

    设计原型图

    

    data数据结构

    {
    productionList: [{
     id: 1,
    title: '商品1'，
    price: 10,
    }],
    cartList: [{
     id: 1,
    quantity: 10,
    }]
    }

    组件设计

    <App>
    <ProductionList>
     <ProductionListItem />
    <ProductionListItem />
    </ProductionList>
    <CartList>
     <CartItem />
    <CartItem />
    </CartList>
    </App>

    结合vuex实现购物车

// store/index.js
import cart from './modules/cart'
import products from './modules/products'
export default new Vuex.Store({
  modules: {
    cart,
    products
  },
})

// store/modules/index.js
import shop from '../../api/shop'
export default {
  namespaced: true,
  state: { all: [] },
  getters: {},
  actions: {
    getAllProducts ({ commit }) {
      shop.getProducts(products => {
        commit('setProducts', products)
      })
    }
  },
  mutations: {
    setProducts (state, products) {
      state.all = products
    },
    // 减少某一个商品的库存（够买一个，库存就相应的减少一个，合理）
    decrementProductInventory (state, { id }) {
      const product = state.all.find(product => product.id === id)
      product.inventory--
    }
  }
}

// api/shop.js
export default {
  getProducts (cb) {
    setTimeout(() => cb(_products), 100)
  },
}

🔚 2020-6