目錄
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中修改爲如下：
<a href="javascript:;" v-if="username">{{username}}</a>
<script>
export default {
data() {
return {
};
},
computed: {
username(){
return this.$store.state.username;
}
}
</script>