记录vuex在项目登录功能的使用

一、记录vuex跟storage结合使用使数据持久化 

// 1. login.vue
// 如在登录之后调用该方法
this.$store.dispatch('getUserInfo')


// 2. store/index.js
// services.getUserInfo：调用接口
getUserInfo ({ commit }) {
      return services.getUserInfo().then(res => {
        res && commit('setUserInfo', res)
      })
},
// storage：封装的util
setUserInfo (state, val) {
      state.userInfo = val
      storage.set('userInfo', val) 
},
state: {
    userInfo: storage.get('userInfo') || {}
},

二、vuex actions中定义的方法的return

记录：

return services.getUserInfo().then(res => {})    //return的是undefined，当then里面的函数有return值的时候，外部return才有值；如果then里面的函数有return值，但是该services.getUserInfo.then没有return的话，内部的值也是return不出去的；

return new Promise((resolve,reject)=>{resolve()})   //new Promise里面需要有resolve/reject函数，不然await此处代码的时候会一直等待这里，即使不写resolve写return也如此；其他同上

三、实战：如果接口返回的数据需要存储在vuex，那么不要在实际组件里面操作接口，可以放在vuex的actions中操作，再由actions中的方法触发commit

// login.vue

handleLogin(){
    this.$refs.loginForm.validate(async valid => {
        if(!valid){
            return false
        }         
        const params = {...this.loginForm}
        this.loading = true
        // res拿到接口返回的router数组
        const res = await this.$store.dispatch("user/login", params)
        this.loading = false
        consoel.log(res) 
    })
}



// store/modules/user.js
// import service.js(接口文件)
login ({ commit, dispatch }, data) {
    return service.login(data).then(async res => {
        if (res.retCode!=200) {
            return
        }
        commit('SET_TOKEN', res.token)
        await dispatch('getUserInfo')
        const routes= await dispatch('generateRoutes')
        return routes
    })
},
getUserInfo({commit,state}){
    return service.getUserInfo(state.token).then(res => {
        res && commit('SET_USERINFO',data.result)
        return res
    })
},
async generateRoutes({ commit, state }) {
    const res = await service.getRoutes(state.token)
    if (res.retCode!== 200) {
      commit('SET_ERROR_COUNTING')
      return []
    }

    const accessRoutes = fitRouter(res.data || []) //fitRouter是自己封装的方法

    commit('SET_ERROR_COUNTING', false)
    commit('SET_INIT', true)
    commit('SET_ROUTES', accessRoutes)

    // dynamically add accessible routes
    router.addRoutes(accessRoutes)

    return accessRoutes
}