Status Manager and promise all

1 Review

2, optimizing View Cart Interface

Problem: Refresh the shopping cart page, the list is not complete request

Algorithms: Asynchronous nested loop --- asynchronous request is incomplete

Will call then promise.all () --- ---- the cycle asynchronous wait for all asynchronous operations are introduced after: Optimization

day06/myapp/routes/cart.js

router.get('/', function(req, res, next) {
  // 1、获取用户id
  let { userid } = req.query;
  let cartarr = [] // 用来记录 购物车的数据
  // 2、依据用户id查询购物车的数据
  sql.find(Cart, { userid }, { _id: 0 }).then(data => {
    // 如果没有数据，告诉用户没有数据
    if (data.length === 0) {
      // 2.1 没有数据
      res.send(utils.cartnull)
    } else {
      cartarr = data // 给购物车数据赋值 ---- 因为用到了promise
      let promise1 = data.map(item => {
        return sql.find(Pro, { proid: item.proid}, { _id: 0})
      })
      return Promise.all(promise1)
    }
  }).then(list => {
    console.log('list', list)
    console.log('cartarr', cartarr)
    let arr = []
    list.map((item, index) => {
      arr.push({
        proid: item[0].proid,
        proname: item[0].proname,
        proimg: item[0].proimg,
        price: item[0].price,
        cartid: cartarr[index].cartid,
        userid: cartarr[index].userid,
        num: cartarr[index].num
      })
    })
    res.send({
      code: '200',
      data: arr
    })
  })
});

• Comments algorithm also requires the use of promise.all

3, the token information into the header information

• Each request without carrying a token, token can get / post, header information may also be

• axios.get('/ ?token=' + token)

• axios.post ( '/', {token: token})

Package axios http://www.axios-js.com/docs/

utils/request.js

import axios from 'axios'

let request = axios.create()

request.defaults.headers['token'] = localStorage.getItem('token')

export default request

Directly import axios from '@ / utils / reqest' instead of import axios form 'axios' when used, then places information related to the token can be extracted all

4, the state manager

Comply way data flow, effectively solve the problem of coupling between components

4.1 Modify Home --- Use Status Manager management status

• views/home/index.vue + views/home/store.js

// store.js
export default {
  state: {},
  getters: {},
  actions: {},
  mutations: {}
}

// ==>
import axios from '@/utils/request'
export default {
  state: { // 首页需要的初始化数据
    bannerlist: []
  },
  getters: { // state的计算属性
  },
  actions: { // 当前页面需要的异步操作
    getBannerlist (context) { // 请求轮播图数据,context上下文对象
      axios.get('/banner').then(res => {
        context.commit({ // 唯一改变状态管理器的方式就是显示的提交mutation
          type: 'changeBannerlist',
          data: res.data.data
        })
      })
    }
  },
  mutations: {
    changeBannerlist (state, data) {
      state.bannerlist = data.data
    }
  }
}

• src / store / index.js here divided state manager module

import Vue from 'vue'
import Vuex from 'vuex'
import home from '@/views/home/store' // ++++++++++++++

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    home // +++++++++++++++++++++
  }
})

• Page state using the state manager and trigger the corresponding function

// views/home/index.vue
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
import { mapState } from 'vuex'
Vue.use(Swipe).use(SwipeItem)
export default {
  data () {
    return {
    }
  },
  computed: { // 使用组件的计算属性获取状态管理器中的数据，具有依赖性
    ...mapState({ // 获取状态管理器中的数据
      bannerlist: (state) => { // 默认参数为state ---- 所有的状态state
        console.log(state) // { home: {}, kind: {}, cart: {}}
        return state.home.bannerlist
      }
    })
  },
  mounted () {
    // 触发状态管理器中的actions
    this.$store.dispatch('getBannerlist')
  }
}
</script>

• Product List

// store.js
import axios from '@/utils/request'
export default {
  state: { // 首页需要的初始化数据
    bannerlist: [],
    prolist: [] // +++++++++++++++
  },
  getters: { // state的计算属性
  },
  actions: { // 当前页面需要的异步操作
    getBannerlist (context) { // 请求轮播图数据,context上下文对象
      axios.get('/banner').then(res => {
        context.commit({ // 唯一改变状态管理器的方式就是显示的提交mutation
          type: 'changeBannerlist',
          data: res.data.data
        })
      })
    },
    // ++++++++++++++++
    getProlist ({ commit }) { // 参数解构
      axios.get('/pro').then(res => {
        commit({
          type: 'changeProlist',
          data: res.data.data
        })
      })
    }
  },
  mutations: {
    changeBannerlist (state, data) {
      state.bannerlist = data.data
    },
    // +++++++++++++++++++++
    changeProlist (state, data) {
      state.prolist = data.data
    }
  }
}

// index.vue
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
import { mapState } from 'vuex'
import Prolist from '@/components/Prolist' // +++++++++
Vue.use(Swipe).use(SwipeItem)
export default {
  // ++++++++++++
  components: {
    Prolist
  },
  computed: { // 使用组件的计算属性获取状态管理器中的数据，具有依赖性
    ...mapState({ // 获取状态管理器中的数据
      bannerlist: (state) => { // 默认参数为state ---- 所有的状态state
        console.log(state) // { home: {}, kind: {}, cart: {}}
        return state.home.bannerlist
      },
      prolist: ({ home }) => home.prolist // ++++++++++++++++++
    })
  },
  created () {
    // 触发状态管理器中的actions
    this.$store.dispatch('getBannerlist')
    this.$store.dispatch('getProlist') // ++++++++++
  }
}
</script>

<Prolist :prolist="prolist" />

• Raja load on the pull-down refresh ---

If the action requires parameters, the object must be passed, if required subsequent assembly operations, must promise