1 store 目录新建 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
hasLogin: false,
deviceId : '',
userId:'',
account:'',
password:'',
userName: '测试',
userPhone:'18645827333',
userAddress:'黑龙江',
avatarUrl :'https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png',
},
mutations: {
setDeviceId(state,provider){
console.log(provider);
console.log(state);
state.deviceId=provider;
},
setUserData(state,provider){
console.log("setUserData is runing!");
console.log(provider);
console.log(provider.userName);
console.log(provider.userPhone);
console.log(provider.userAddress);
state.userId=provider.userId;
state.userName=provider.userName;
state.userPhone=provider.userPhone;
state.userAddress=provider.userAddress;
state.avatarUrl =provider.avatarUrl ;
state.hasLogin=true;
},
logout(state) {
state.deviceId='';
state.userName='未登陆,请登陆';
state.userPhone='';
state.userAddress='';
state.hasLogin=false;
}
}
})
export default store`
2 main.js 挂载 Vuex
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
3 使用已login为例
<template>
<div>
<div class="login_box">
<div class="login_panel">
<div class="login_title">
<img src="../../../static/img/login/logo.png" alt="">
<p>输入账号进行安全登录</p>
</div>
<label style="margin-top: 50px">账号：</label>
<input class="uni-input" v-model="my_account" />
<label>密码：</label>
<input class="uni-input" v-model="my_password" />
<button class="bt" type="primary" @click="login">登录</button>
<div>
{{deviceId}}
</div>
</div>
</div>
<div>
</div>
</div>
</template>
<script>
//导入常量
import { LOGIN_API, KEY_VUE_DEVICE_ID} from "../../../constant"
//引入生成随机数
import UUID from 'uuid-js'
//导入vuex
import {
mapState,
mapMutations,
mapGetters
} from 'vuex';
export default {
data() {
return {
my_account:'user',
my_password:'123'
}
},
computed:{
//使用vuex中的state
...mapState(["deviceId","account","password"])
},
methods: {
//使用vuex中的mutations
...mapMutations(["setDeviceId",'setUserData']),
login(){
let myDeviceId=this.my_setDeviceId();
console.log('account '+this.my_account); //用户名
console.log('password '+this.my_password); //密码
console.log('vueDeviceId '+myDeviceId); //设备码
//that=this;
uni.request({
url: LOGIN_API,
method: 'POST',
data: {
account:this.my_account,
password:this.my_password,
device:myDeviceId
},
success: res => {
console.log(res.data);
if(res.data.status==0){
let userData=[];
userData.userId=res.data.data.id;
userData.userName=res.data.data.name;
userData.userPhone=res.data.data.phone;
userData.userAddress=res.data.data.address;
userData.avatarUrl =res.data.data.version;
this.setUserData(userData);
uni.showModal({
content: '登录成功',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
uni.switchTab({
url: '/pages/main'
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}else{
uni.showToast({
title:res.data.msg,
icon: 'none',
})
}
},
fail: () => {},
complete: () => {}
});
},
//设置设备随机码
my_setDeviceId(){
console.log(this.deviceId);
let vueDeviceId = uni.getStorageSync(KEY_VUE_DEVICE_ID);
if(vueDeviceId == ""){
console.log("加载失败！");
vueDeviceId = UUID.create().toString();
console.log('generate device id '+vueDeviceId);
this.setDeviceId(vueDeviceId);
uni.setStorageSync(KEY_VUE_DEVICE_ID, vueDeviceId);
}else{
console.log("加载成功");
this.setDeviceId(vueDeviceId);
console.log('generate device id '+vueDeviceId);
}
return vueDeviceId;
}
},
onLoad() {
//uni.setStorageSync(KEY_VUE_DEVICE_ID, '');
//uni.removeStorageSync(KEY_VUE_DEVICE_ID);
}
}
</script>
<style scoped>
</style>
说明：屡屡思路
先在缓存中判断有没有随机数 然后请求后端 得到的数据 都存储到vuex 中
网友评论