首次登錄我的應用程式時，用戶可以留下他們的地址。存盤此地址后，用戶將被推送到他們的儀表板。第二次登錄用戶直接進入儀表板。
我有 2 個使用 response.data 更新的 Vuex 狀態。“已簽名”指向地址頁面，“頻繁”指向“儀表板”。
//PROMPT.VUE
mounted () {
this.getPrompt()
},
computed: {
promptStatus () {
return this.$store.getters.getPrompt
}
},
methods: {
async getPrompt() {
try{
await //GET axios etc
// push prompt status in Store
let value = response.data
this.$store.commit('setPrompt', value)
if (this.promptStatus === 'signed') {
this.$router.push({path: '/adres'})
}
if (this.promptStatus === 'frequent') {
this.$router.push({path: '/dashboard'})
}
當用戶離開地址時，我將 vuex.state 從“簽名”重置為“頻繁”。
//ADRES.VUE
//store address
let value = 'frequent'
this.$store.commit('setPrompt', value)
this.$router.push({name: 'Prompt'})
Vuex.store 已重繪 。但是 Prompt.vue 不會使用新的 vuex.status 重新渲染。寫了很多文章。找不到我的解決方案。也許我以錯誤的方式組織我的頁面。
uj5u.com熱心網友回復：
在視圖中，不建議在 vuex 之外修改資料（呼叫 commit）。為這些目的創建操作（使用調度從組件呼叫）。在您的情況下，您需要從商店呼叫操作“getPrompt”，但在授權組件中處理路由。這更多的是關于最佳實踐
為了解決您的問題，您需要在切換到儀表板時制作一個加載器。在收到資料之前，您不會將用戶轉移到儀表板頁面
例子
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "DashboardLayout",
components: { ..., ... },
data: () => ({
isLoad: false
}),
async created() {
this.isLoad = false;
try {
await this.$store.dispatch('getData');
this.isLoad = true;
} catch (error) {
console.log(error)
}
}
});
</script>
在“getData”操作中接收資料并將其存盤在存盤中。
對儀表板頁面的參考在授權后進行。如果授權無效，則 router/index.js 中的 router.beforeEach 處理程式（導航守衛）應重定向回登錄頁面。
了解有關 vuejs 中的布局的更多資訊
了解有關導航守衛的更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419957.html
標籤：
上一篇：無法創建物體框架代碼優先遷移