vuex 状态的问题答案

【问题标题】：Problems with vuex statesvuex 状态的问题
【发布时间】：2020-09-26 18:58:34
【问题描述】：

当我的应用程序启动时，我提出两个请求以获取一些我将在我的所有组件中基本使用的信息（公司和用户信息）。我将此信息存储在 store.js 中

我的 App.vue

<template>
    <router-view></router-view>
</template>

export default{
   methods: {
       getCompanyIndormation(){
           //Vuex function to store company information
           this.setCompanyInformation(someinformation)
       },
       getUserInformation(){
           //Vuex function to store user information
           this.setUserInformation(someinformation)
       }
   }
}

我的商店.js

export default new Vuex.Store({
       state: {
          user: {
            id: '',
            name: '',
          },
          company: {
            name: '',
            subdomain: ''
         }
      },
      mutations: {
        setUserInformation: (state, obj) => {
            state.user.id = obj.id;
            state.user.name = obj.name;
        },
        setCompanyInformation: (state, obj) => {
           state.company.name = obj.name;
           state.company.subdomain = obj.subdomain;
        }
     }
})

到目前为止，一切正常。我的问题是当我试图在我拥有的 mixin 中从公司检索一些信息时。

我的 mixin.js

import { mapState } from 'vuex';
const myMixin = {
    computed: {
      ...mapState(['company'])  
    },
    methods: {
       $getCompanyUrl(){
           return 'https:// '+this.company.subdomain+'/contact'
       }
    }
}

我这里的问题是，在某些情况下我的mixin的函数通常会返回整个url，例如：https://domain1.com/contact但有时它会返回https:///contact，也就是说，他没有发现它仍然是领域。有人对我如何解决这个问题有任何建议吗？我是添加一个观察者来查看商店中公司信息何时发生变化，还是希望在渲染路由器视图之前完成所有初始需求？

【问题讨论】：

你在哪里提交 setCompanyInformation 突变？你是从服务器获取的吗？
没错！我使用 axios 向我的后端发出请求，并在 setCompanyInformation 上使用响应。我认为没有必要把所有的请求代码都放上去，所以我把它省略了。但如果有必要我也会发帖:)
好吧，那我就做v-if="company.subdomain !== ''"之类的事情来避免在请求完成之前使用它

标签： vue.js vuex

【解决方案1】：

也许只需在您的商店中为公司网址创建一个getter。

getters: {
  companyUrl: state => `https://${state.company.subdomain}/contact`,
},

然后在其他任何地方使用mapGetters。 getter 是用来观察状态变化的。

【讨论】：