uniapp+vuex储存登录状态和用户数据

1. 首先我们在根目录下新建一个 store 文件夹，然后在里面新建一个index.js文件

2. 里面的内容是，这里我就不讲创建过程了，可以去查下如何使用vuex，我这里写了两个方法，一个登陆保存，一个退出登录清除数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {hasLogin:false,        //用户是否登录userInfo:{}				//用户数据},//mutations定义同步操作的方法mutations: {// 登录login(state,user){//登录状态为已登录state.hasLogin = truestate.userInfo = user//储存用户数据到本地uni.setStorage({key: 'userInfo',data: user,});console.log('登陆成功')console.log(state.hasLogin,state.userInfo)},// 退出登录logout(state,user){//登录状态为未登录state.hasLogin = falsestate.userInfo = {}//删除本地储存uni.removeSavedFile({key: 'userInfo',})console.log('退出登录')console.log(state.hasLogin,state.userInfo)}},actions: {}
})
export default store

3. main.js里面去挂载

import Vue from 'vue'
import App from './App'import store from './store'   //引入vuex// 挂载vuex
Vue.prototype.$store = store;Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App,store 
})
app.$mount()

4.使用，在登录页面引入vuex

5.在组件中提交 Mutation

登录成功后保存用户数据并执行login方法

success: (res) => {console.log(res)switch (res.data.msg.status) {//登录成功case 1://获取用户数据let userInfo = {userId: res.data.msg.user.userId,token: res.data.msg.token,phone: res.data.msg.user.userTel,userName: res.data.msg.user.userName,jurisdiction: res.data.msg.user.roleId,}//执行vuex里面的登录函数并把用户数据传输过去this.login(userInfo)

6.每次进入应用前，由App.vue 中的周期函数进行监听，所以在加载函数中定义方法，从本地缓存中取 出用户数据，然后调用login方法，不需要发起网络登录请求。

<script>import {mapMutations} from 'vuex'export default {methods: {...mapMutations(['login'])},onLaunch: function() {const userInfo = uni.getStorageSync('userInfo');    //同步获取本地数据//判断本地缓存是否存在数据if (userInfo !=="") {//传到vuex里面储存起来,并改变登录状态this.login(userInfo)}},}

如果想清除登录状态就执行logout那个函数就可以了

import {mapMutations,mapState} from 'vuex'export default {data() {return {user: [],}},computed: {...mapState(['userInfo'])},methods: {...mapMutations(['logout']),// 是否退出登录onremoveLogout() {var that = thisuni.showModal({title: '提示',content: '是否退出登录',success: function(res) {if (res.confirm) {that.logout(res)that.$link.nav('login')} else if (res.cancel) {console.log('用户点击取消');}},})}}}

以上就是登录状态储存的全部内容了
小白一个，多多包涵

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！