如何在没有 API 调用的情况下设置 Vuex 数据？答案

【问题标题】：How to set Vuex data without an API call?如何在没有 API 调用的情况下设置 Vuex 数据？
【发布时间】：2019-01-02 00:41:39
【问题描述】：

我正在运行一个 PHP 后端，并且已经有了我想在我的 Vuex 存储中设置的必要数据。通常，如果我已经有了这些数据并且只需要在组件中使用它，我只需 html_encode 和 json_encode 将这些数据作为道具传递。

这要求我不必对我视图中已经可用的数据进行 API 调用。

目前我正在考虑做这样的事情，但这感觉很难看，因为我在这里使用全局变量：

在我看来：

<script>
    window.searchContext = {{ $searchContext }};
</script>

然后在我的主 Vue 实例所在的 app.js 中：

data: {
   searchContext: window.searchContext
}

一旦我在我的主 Vue 实例中获得了数据，我就可以填写我的 Vuex 存储。通过使用类似的东西：

created() {
    this.$store.commit('datepicker/arrival', this.searchContext.arrival);
    this.$store.commit('datepicker/arrival', this.searchContext.arrival);
    // etc.
}

会有更好的模式来做这样的事情吗？我可能想多了，因为这可能工作得很好……

【问题讨论】：

标签： javascript php vue.js vuex

【解决方案1】：

首先，您当前所做的一切都很好。它看起来很丑，但完全没问题。但是，一旦读取此数据，请从 window 对象中删除它。

您基本上要做的是SSR - 服务器端渲染。一旦您开始预渲染大量数据，您应该切换到官方 SSR 解决方案。

但是，当您当前拥有 PHP 后端时，执行 SSR 将需要 Node.js。 SSR 本身就相当复杂，只有在需要时才应该选择它。它使构建堆栈变得复杂。

阅读更多关于Vue SSR的信息。

【讨论】：