乐趣区

关于vuex:uniapp使用vuex管理登录状态

小程序登录后应用 vuex 来治理登录状态和退出,小程序登录之后将后端发送过去的 token 存储到本地,而后应用 vuex 读取并且扭转登录状态。

import vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

export default new Vue.store({
    state:{
        // 登录状态
        loginStatus: flase,
        // 存储 token
        token: false
    },
    mutations:{
        // 登录胜利扭转状态和存储 token
        login(state,userToken){
            state.loginStatus = true,
            state.token = userToken,
            uni.setStorageSync('userToken',JSON.stringify(userToken))
        },
        // 退出操作:更改状态,删除 token
        logout(state){
            state.loginStatue = false,
            token = false,
            uni.removeStorageSync('userToken)
        }
    },
    actions:{
        // 再定义个初始化登录的办法,放弃登录状态
        initUser({state}){let userToken = uni.getStorageSync('userToken')
            if(userToken){
                state.loginStatus = true,
                state.token = JSON.parse(userToken)
            }
        }
    }
})

这样咱们就能够在登录页面间接调用这个办法和状态了!

退出移动版