uniapp——获取退出登录
对vuex进行封装index.jsimport 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
·
对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',
});
}
}
第三种方法:
更多推荐
已为社区贡献20条内容
所有评论(0)