vue/vuex: 你能从另一个页面重新渲染一个页面吗？

Question

在我的应用程序中首次登录时，用户可以留下他们的地址。存储此地址后，用户将被推送到他们的仪表板。第二次登录用户直接进入仪表板。

我有 2 个使用 response.data 更新的 Vuex 状态。 'Signed' 指向地址页，'Frequent' 指向 'dashboard'。

    //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 从 'signed' 重置为 'frequent'。

                //ADRES.VUE
                //store address

                let value = 'frequent'
                this.$store.commit('setPrompt', value)
                
                
                this.$router.push({name: 'Prompt'})

刷新了Vuex.store。但是 Prompt.vue 不会用新的 vuex.status 重新渲染。写了很多。找不到我的解决方案。可能我的页面组织方式不对。

Answer 1

在views中，不建议在vuex外修改数据（call 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 处理程序（导航守卫）应该重定向回登录页面。

Learn more about layout in vuejs

Learn more about navigation guards

vue/vuex: 你能从另一个页面重新渲染一个页面吗？

vue/vuex: Can you re-render a page from another page?

vue.js

vuex