uniapp——获取退出登录

对vuex进行封装

index.js 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import cart from './modules/cart.js'
// import user from './modules/user.js'
let store = new Vuex.Store({
	modules:{
		cart,
	}
})
export default store

cart.js 

export default {
	state: {
		list: [ {
			checked: false,
			id: 11,
			title: "商品标题111",
			cover: "/static/images/demo/list/1.jpg",
			// 选中商品属性
			attrs: [{
					title: "颜色",
					selected: 0,
					list: [{
							name: '火焰红',
						},
						{
							name: '炭黑',
						},
						{
							name: '冰川兰',
						}
					]
				},
				{
					title: "容量",
					selected: 0,
					list: [{
							name: '64GB',
						},
						{
							name: '128GB',
						},
					]
				},
				{
					title: "套餐",
					selected: 0,
					list: [{
							name: '标配',
						},
						{
							name: '套餐一',
						},
						{
							name: '套餐二',
						}
					]
				},
			],
			pprice: 336,
			num: 1,
			minnum: 1,
			maxnum: 10, // 该商品最大商品数，跟库存有关
		},
		{
			checked: false,
			id: 12,
			title: "商品222",
			cover: "/static/images/demo/list/1.jpg",
			// 选中商品属性
			attrs: [{
					title: "颜色",
					selected: 0,
					list: [{
							name: '火焰红',
						},
						{
							name: '炭黑',
						},
						{
							name: '冰川兰',
						}
					]
				},
				{
					title: "容量",
					selected: 0,
					list: [{
							name: '64GB',
						},
						{
							name: '128GB',
						},
					]
				},
				{
					title: "套餐",
					selected: 0,
					list: [{
							name: '标配',
						},
						{
							name: '套餐一',
						},
						{
							name: '套餐二',
						}
					]
				},
			],
			pprice: 200,
			num: 1,
			minnum: 1,
			maxnum: 10, // 该商品最大商品数，跟库存有关
		},
		{
			checked: false,
			id: 13,
			title: "商品标题333",
			cover: "/static/images/demo/list/1.jpg",
			// 选中商品属性
			attrs: [{
					title: "颜色",
					selected: 0,
					list: [{
							name: '火焰红',
						},
						{
							name: '炭黑',
						},
						{
							name: '冰川兰',
						}
					]
				},
				{
					title: "容量",
					selected: 0,
					list: [{
							name: '64GB',
						},
						{
							name: '128GB',
						},
					]
				},
				{
					title: "套餐",
					selected: 0,
					list: [{
							name: '标配',
						},
						{
							name: '套餐一',
						},
						{
							name: '套餐二',
						}
					]
				},
			],
			pprice: 100,
			num: 2,
			minnum: 1,
			maxnum: 10, // 该商品最大商品数，跟库存有关
		} 
		],
		selectedAll:[]//储存选中数据
	},
	getters: {
		//购物车为空
         disSelect(state){
			 return state.list.length === 0;
		 },
		//全部选中	
		checkedAll(state){
			return state.list.length === state.selectedAll.length
		},
		//计算总价
		totalPrice(state){
			let total = 0
			state.list.forEach(v=>{
				/* if(state.selectedAll.indexOf(v.id)!=-1){
					total += v.pprice * v.num
				} */
				console.log(v.num);
				 if(v.checked){
					total += v.pprice * v.num
				} 
				
			})
			return total
		},
		//合计按钮不可用状态
		disabled(state){
			if(state.list.length===0){
			 	state.list.checked = false
				return true
			}
			
		}
	},
	mutations: {
		//单选
		selectItem(state,index){
			var id = state.list[index].id
			var i = state.selectedAll.indexOf(id)
			if (i > -1) {
				// 取消当前商品选中状态
				state.list[index].checked = false
				// 移除选中列表中的当前商品
				return state.selectedAll.splice(i,1)
			}
			// 选中
			state.list[index].checked = true
			state.selectedAll.push(id)
			console.log(state.selectedAll);
		},
		
		  //全选
          selectAll(state){
			  /* 方法一 */
			  state.selectedAll=[]/* 清空以前的全中的内容 */
			  state.list.map(v=>{
				  v.checked = true
				  state.selectedAll.push(v.id)
			  }) 
			  /* 方法二 */
			   /* state.selectedAll = state.list.map(v=>{
				    v.checked = true
					return v.id
			   }) */
		  },
		  //全不选
		  noselectAll(state){
			  state.list.map(v=>{
				   v.checked = false
			  })
			   state.selectedAll = []
		  },
		  //删除商品
		  delgoods(state){
			 state.list =  state.list.filter(v=>{
				 console.log(state.selectedAll.indexOf(v.id) === -1);
				 return state.selectedAll.indexOf(v.id) === -1
			  })
			  state.selectedAll = []//清空id
		  }
	},
	actions: {
		//全选
       /* doselectAll(context){
			console.log(context);
			context.getters.checkedAll?context.commit('noselectAll'):context.commit('selectAll')
		} */
		 doselectAll({getters,commit}){
			getters.checkedAll?commit('noselectAll'):commit('selectAll')
		}, 
		dodelgoods({commit}){
			uni.showModal({
				content:'您确定要删除吗',
				success: () => {
					commit('delgoods')
				},
				fail: (err) => {
					console.log(err);
				}
			})
		}
	}
}

---

user.js

import $H from "@/utils/request.js"
export default {
	state:{
		token:false,
		status:false,
		userInfo:{}
	},
	mutations:{
		
	},
	getters:{},
	action:{},
	
}

在myfile中引入vuex 

import {mapState} from 'vuex'

computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
			})
		}

对标签进行判断

{{userInfo.nickname?userInfo.nickname:'登陆/注册'}}

点击登陆时获取数据

mutations: {
		//登录获取数据并储存到vuex
		login(state, userInfo) {
			state.userInfo = userInfo //res.data.data
			state.token = userInfo.token
			state.status = userInfo.status
			console.log(userInfo.nickname);
		},
	},

在login页面引入

import {mapMutations} from 'vuex'
...mapMutations(['login']),

---

这时刷新页面时会丢失数据，这里需要本地存储

写个方法用来得到数据

		initUser(state) {
			let userinfo = uni.getStorageSync('userInfo')
			let userInfo = JSON.parse(userinfo)
			if (userInfo) {
				state.userInfo = userInfo
				state.token = userInfo.token
				state.status = userInfo.status
			}
		},

进行设置

 在app.vue中写入 

---

接下来是点击退出登录按钮后清空数据

		loginOut(state){
			state.userInfo = {}
			state.token = false
			state.status = false
			uni.removeStorageSync('userInfo')
		}

因为删除数据需要返回给后端，不能直接在表面上删除，所以需要用到删除接口

			header: options.header || {},

	actions: {
		layout(context){
			let userinfo = uni.getStorageSync('userInfo')
			let userInfo = JSON.parse(userinfo)
			let token = userInfo.token
			console.log(context);
			$H({
				url:'/logout',
				method:'POST',
				data:{},
				header:{
					token
				}
			})
			context.commit('loginOut')
		}
	}

 

另一种方法：

在request.js中引入store

import $store from "@/store/index.js"

if (options.header) {
			console.log($store);
			options.header.token = $store.state.user.token
			// 二次验证(拦截器)
			if (options.checkToken && !options.header.token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return uni.navigateTo({
					url: '/pages/login/login',
				});
			}
		}

 

 第三种方法：