Vue.js 在整个应用程序中具有依赖API调用的基本Vue存储

我曾在Vue论坛上问过这个问题，但没有得到回应，因此我将尝试在这里重复这个问题：

我有一个客户端登录的应用程序，可以管理多个帐户（网站）。在应用程序的标题中，有一个下拉列表，用户可以在其中选择活动帐户，这将影响应用程序中显示任何帐户特定信息的所有组件

因为在整个应用程序的组件中都需要此帐户信息，所以我尝试遵循此处显示的商店示例（在我的情况下，Vuex似乎有些过分）：

在我的src/main.js中，我定义如下：

Vue.prototype.$accountStore={
账户：[]，
selectedAccountId:null，
selectedAccountDomain:空
}

这是我加载/更改帐户的组件：

<template>
  <div v-if="hasMoreThanOneAccount">
    <select v-model="accountStore.selectedAccountId" v-on:change="updateSelectedAccountDomain">
      <option v-for="account in accountStore.accounts" v-bind:value="account.id" :key="account.id">
        {{ account.domain }}
      </option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'AccountSelector',
  data: function () {
    return {
      accountStore: this.$accountStore,
      apiInstance: new this.$api.AccountsApi()
    }
  },
  methods: {
    updateSelectedAccountDomain: function () {
      this.accountStore.selectedAccountDomain = this.findSelectedAccountDomain()
    },
    findSelectedAccountDomain: function () {
      for (var i = 0; i < this.accountStore.accounts.length; i++) {
        var account = this.accountStore.accounts[i]
        if (account.id === this.accountStore.selectedAccountId) {
          return account.domain
        }
      }

      return 'invalid account id'
    },
    loadAccounts: function () {
      this.apiInstance.getAccounts(this.callbackWrapper(this.accountsLoaded))
    },
    accountsLoaded: function (error, data, response) {
      if (error) {
        console.error(error)
      } else {
        this.accountStore.accounts = data
        this.accountStore.selectedAccountId = this.accountStore.accounts[0].id
        this.updateSelectedAccountDomain()
      }
    }
  },
  computed: {
    hasMoreThanOneAccount: function () {
      return this.accountStore.accounts.length > 1
    }
  },
  mounted: function () {
    this.loadAccounts()
  }
}
</script>

<style scoped>
</style>

{{account.domain}
导出默认值{
名称：“AccountSelector”，
数据：函数（）{
返回{
accountStore:这是$accountStore，
apiInstance:newthis.$api.AccountsApi（）
}
},
方法：{
updateSelectedAccountDomain:函数（）{
this.accountStore.selectedAccountDomain=this.findSelectedAccountDomain（）
},
findSelectedAccountDomain:函数（）{
for（var i=0；i1
}
},
挂载：函数（）{
这是loadAccounts（）
}
}

对我来说，这似乎不是最好的方法，但我真的不确定什么是更好的方法。一个问题是，在回调之后，我手动设置了帐户、selectedAccountId和selectedAccountDomain。我觉得SelectedAccounted和selectedDomainId应该是计算属性，但我不确定当存储不是Vue组件时如何做到这一点

---

我遇到的另一个问题是，在第一次加载selectedAccountId之前，我无法在任何其他组件中进行任何API调用，因为API调用需要知道帐户ID。但是，我不确定最好的方法是侦听此更改，然后进行API调用，第一次和以后更新时都是如此。

目前，您似乎使用

存储

来简单地保存值。但是，当您将逻辑集中在存储中时，实际上也实现了通量/存储模式的真正威力。如果你在整个应用程序的组件中散布与存储相关的逻辑，那么最终它将变得越来越难维护，因为这种逻辑无法重用，而且在修复bug时，你必须遍历组件树才能找到逻辑

如果我是你，我会创建一个商店

• 定义“主要数据”，然后
• 定义可以从原始数据派生的“派生数据”，最后
• 定义可用于与此类数据交互的“方法”

在我看来，“主要数据”是

用户

，

账户

，以及

所选账户

。“衍生数据”是

是登录的

，

是可选的可登录的

，

有多个账户

。作为Vue组件，您可以这样定义它：

从“Vue”导入Vue；
导出默认的新Vue({
数据（）{
返回{
用户：null，
账户：[]，
selectedAccount:空
};
},
计算：{
伊斯洛格丁（）{
返回this.user！==null；
},
IsSelectedAccountable（）{
返回此值。selectedAccount！==null；
},
拥有超过一个帐户（）{
返回this.accounts.length>0；
}
},
方法：{
登录（用户名、密码）{
console.log（“执行登录”）；
如果（用户名==“约翰史密斯”&&password==“密码”）{
log（“提交用户对象以存储和加载关联帐户”）；
此用户={
姓名：“约翰·史密斯”，
用户名：“约翰史密斯”，
电子邮件：“约翰。smith@somewhere.com"
};
这个.loadAccounts（用户名）；
}
},
loadAccounts（用户名）{
log（“从后端加载关联帐户”）；
如果（用户名==“约翰史密斯”）{
//在实际代码中，您可以在此处执行数组大小检查
//如果大小为1，您可以在此处设置selectedAccount
//this.selectedAccount=数组[0]；
console.log（“将帐户提交到存储”）；
这是我的帐户=[
{
id:“001234”，
域名：“域名001234”
},
{
编号：“001235”，
域名：“域名001235”
}
];
}
},
设置所选科目（科目）{
this.selectedAccount=账户；
}
}
});

然后，您可以轻松地在任何Vue组件中导入此存储，并从此存储中开始引用值或调用方法

例如，假设您正在创建一个

Login.vue

组件，当

user

对象在商店中可用时，该组件应该重定向，您可以通过执行以下操作来实现这一点：

登录

从“../basic store”导入存储；
导出默认值{
数据（）{
返回{
用户名：'johnsmith'，
密码：“密码”
};
},
计算：{
岛