目录
1. 登录页面
2. Vuex集成
登录页面
(1)登录功能
<template>
<div class="login-form">
<h3>
<span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
</h3>
<div class="input">
<input type="text" placeholder="请输入帐号" v-model="username">
</div>
<div class="input">
<input type="password" placeholder="请输入密码" v-model="password">
</div>
<div class="btn-box">
<a href="javascript:;" class="btn" @click="login">登录</a>
</div>
<div class="tips">
<div class="sms" @click="register">手机短信登录/注册</div>
<div class="reg">立即注册<span>|</span>忘记密码?</div>
</div>
</div>
</template>
<script>
export default {
name: 'login',
data(){
return {
username:'',
password:'',
userId:''
}
},
methods:{
login() {
let {username, password} = this;
this.axios.post('/user/login', {
username,
password
}).then((res) => {
this.$cookie.set('userId', res.id, {expires:'1M'});
//to-do保存用户名
this.$router.push('/index')
})
},
register() {
this.axios.post('/user/register', {
username:'admin',
password:'admin1',
email:'[email protected]'
}).then(() => {
alert('注册成功');
})
}
}
}
</script>
(2)拉取用户信息
在App.vue中:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
//import storage from './storage'
export default {
name: 'App',
components: {
},
data() {
return {
res: {}
}
},
mounted() {
this.getUser();
this.getCartCount();
},
methods: {
getUser() {
this.axios.get('/user').then(() => {
//to-do保存在vuex
})
},
getCartCount() {
this.axios.get('/carts/products/sum').then(() => {
//to-do 保存在vuex
})
}
}
}
</script>
Vuex集成
(1)Vuex框架搭建
-
在src文件夹中创建文件夹store,并在store文件夹下创建三个文件,分别是 action.js、index.js、mutations.js。
-
在index.js中:
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex);
const state = {
username: '',
cartCount: 0
}
export default new Vuex.Store({
state,
mutations,
actions
})
- 在mutations.js中:
export default {
}
- 在action.js中:
export default {
}
- 在main.js中新增:
import store from './store'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
(2)Vuex存储读取数据
- 在action.js中:
export default {
saveUserName(context, username) {
context.commit('saveUserName', username);
},
saveCartCount(context, count) {
context.commit('saveCartCount', count);
}
}
- 在mutations.js中:
export default {
saveUserName(state, username) {
state.username = username;
},
saveCartCount(state, count) {
state.cartCount = count;
}
}
- 在login.vue中存储用户信息:
<!--大部分无关无关代码被省略-->
<div class="btn-box">
<a href="javascript:;" class="btn" @click="login">登录</a>
</div>
<script>
export default {
methods:{
login() {
let {username, password} = this;
this.axios.post('/user/login', {
username,
password
}).then((res) => {
this.$cookie.set('userId', res.id, {expires:'1M'});
this.$store.dispatch('saveUserName', res.username); //将用户信息存入state中
this.$router.push('/index')
})
}
}
}
</script>
- 在NavHeader.vue读取用户信息:
<a href="javascript:;" v-if="username">{{username}}</a>
<script>
export default {
data() {
return {
username: this.$store.state.username,
};
}
</script>
-
在App.vue中
由于store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。当页面重新加载时,在App.vue中重新存储一次用户信息到state里。
mounted() {
this.getUser();
},
methods: {
getUser() {
this.axios.get('/user').then((res) => {
this.$store.dispatch('saveUserName', res.username);
})
}
}
(3)解决vuex页面数据延迟
vuex数据更新,页面数据没有跟着刷新?这是由于先通过this.$store.state.username,
读取到了变量,而此时这个变量还未被存储到state中,所以为空。读取了空变量后才执行了this.$store.dispatch('saveUserName', res.username);
。
解决方法之一:使用计算属性。
将NavHeader.vue中修改为如下:
扫描二维码关注公众号,回复:
10557840 查看本文章
<a href="javascript:;" v-if="username">{{username}}</a>
<script>
export default {
data() {
return {
};
},
computed: {
username(){
return this.$store.state.username;
}
}
</script>