Vue - 常见疑问：（第二弹）

（6）“我可以一起使用Vue和Redux吗?”

当然可以 - 虽然你通常不会使用 Redux ，但是 Vue 有自己的实现：Vuex。

Vuex受到Redux的启发，但很好地融入了“Vue世界”。它还知道状态（state）和动作（actions），但随后使用 mutation 替代了 reducer，并使用 getter 来获取值。

（7）“我可以和 PHP/Node/…一起使用 Vue 吗？”

我经常看到这个问题：你是否可以和 PHP 和 Node 一起来使用 Vue.js 或其他一些服务器端语言。

答案是肯定的！

Vue并不关心你的后端和服务器端语言，它是一个客户端框架，它在浏览器中运行！

如果你将Vue导入到（服务器渲染的）HTML文件中，或者您正在构建一个SPA，这都不重要。在这两种情况下，Vue只管理前端！

如果您正在构建一个SPA，您只需要通过Ajax请求(通过类似 axios 的库)与服务器进行通信，因此您的后端需要提供一个（RESTful） API，Vue 可以发送它的请求。这就是一切！

但有一个例外很重要：如果你使用的是Vue应用程序的服务器端预渲染（例如通过Nuxt.js），那么你仍然不会使用Vue编写服务器端代码（即访问数据库、使用文件存储或类似的操作），但是你可以在服务器上预渲染你的Vue应用程序。虽然到目前为止，这只对 Node.js 有效，如果这对你很重要，你应该一起使用Node.js。

（8）如何防止页面刷新后的状态丢失?

这是我经常观察到的一个问题：“如果我按下浏览器上的刷新按钮，我的app状态就会重置。我怎么才能阻止这件事？”

这是真的！如果你点击那个刷新按钮，你的页面会重新加载，因为Vue完全是在JavaScript中运行，你的脚本重启，你的应用程序状态就会丢失。这不是错误，而是预期的行为。

如果你来自一个“传统”的web开发环境，通过在服务器端语言中呈现视图来构建web页面，这是一种奇怪的行为。例如，你曾经使用 Session 来管理用户状态。因此，页面刷新不会失去这个状态。

在Vue(或其他框架和库)创建的单页面应用中，你不会使用会话。原因很简单：你的应用与后端分离。最后，你只有一个页面，而你所谈论的(RESTful) API并不关心你的应用程序——它是无状态的。

如果你将Vue放到服务器渲染的HTML文件中，这并不重要。你的服务器正在关注所有视图并将它们绑定在一起。

但是回到SPAs：所以你不用会话——你会怎么做?

您有两个通用的选项来保持用户状态（例如:“用户登录了吗?”）：

1. 使用 localStorage 来存储简单的键值对，比如从后端得到的JSON Web Token (JWT)，这是一种在SPAs中常用的身份验证模式。
2. 为需要长期保存的状态/数据，使用一个服务器端数据库。

localStorage是存储客户端状态的常见选择。如果用户清除所有浏览器数据，就会丢失，因此不适合需要长期存储的数据。它也可以通过JavaScript(和用户)访问，所以你不应该在那里存储安全相关的信息。你经常使用它来存储JWTs，尽管这些令牌是短期的(出于安全原因)，并允许用户在后端访问一些受保护的资源。

你可以通过以下模式使用localStorage来在页面刷新中存储状态：

1. 一旦你有了它(例如，存储一个JWT，一旦你收到了它)，就在localStorage中存储数据。
2. 当应用程序启动时，检查数据是否存储在localStorage中——一个好的位置是在 App.vue 组件中的 created() 生命周期方法中，因为它将在应用程序生命的开始处执行。
3. 如果可用的话，使用从localStorage获得的任何（可选的）数据来初始化你的应用程序。

通过使用这个模式，你可以在你离开它的状态下启动应用程序。

在页面刷新时，使用服务器端数据库来处理与客户端无关的数据，但是应该将其长期存储或让其在不同设备上同步(例如，选定的用户位置)。

（9）“我可以在Heroku上托管我的应用程序吗?”

“我可以在Heroku或者类似的服务上托管我的Vue单页应用程序吗?”

这个问题我也看到很多！

答案是：一般来说，是的 - 你当然可以在任何一个虚拟主机服务上托管你的 App 。但是有一些服务比其他的更适合。例如，Heroku是一个构建的服务，它允许你轻松地托管 PHP 和 Node.js 等应用。它可以切换合适的环境(比如配置服务器、解释器等等，需要的第二语言)，并确保你不必花费几个小时来设置这些内容。

但是Vue不使用任何服务器端语言！在运行 npm run build 后，它只是一堆 和 index.html 文件一样的 JavaScript 和 CSS 文件。你不需要一个节点服务器！

因此，对于Vue单页面应用程，像 AWS S3 或 Firebase 这样的静态网站托管是更好的选择。它们通常比较便宜，安装起来非常容易，而且不需要您添加额外的代码（比如一个虚拟Node.js服务器）只是把你的文件发送给你的用户。

如果你只是在服务器端渲染应用程序中使用Vue，即某些服务器端模板引擎生成视图，那么你将需要一个运行该服务器端语言的主机。

（10）如何在部署后修复损坏的路由。

在将Vue单页应用部署到真正的服务器后，我有时听说路由停止工作。至少，如果用户直接访问任何其他页面，而不是主页——比如 https://my-app.com/products，或者用户在这样一个“子页面”上刷新浏览器。

要理解这个“错误”(这不是一个真正的错误)，我们必须了解路由在Vue应用中是如何工作的。

Vue存储和管理你的路由，而不是托管你的Vue应用的服务器！请记住，该服务器仅服务于 index.html 文件 - 这是它唯一的工作！

重要：这只适用于Vue的单页应用程序！

因此，你的服务器不能对一个指向 /products 路由的传入请求做任何事情——它完全不知道！由于web的工作方式，请求到达服务器，而你的客户端(即Vue应用程序)在服务器抛出404错误时甚至没有加载。

那么我们能做些什么来解决这个问题呢？

解决方法很简单：你的服务器应该始终服务于 index.html 文件，特别是在404错误案例中！如果你配置你的服务器来做这个（静态主机，比如 AWS S3 或Firebase 提供易于使用的配置来实现这种行为），您的Vue应用程序将被加载，并得到一个处理请求的机会。

如果你仍然想为真正未知的路由渲染404错误页面，也就是说，在你的Vue应用程序中也没有配置这个错误页面，那么你将会添加一条这样的路由：

// 先配置所有其他路由，否则它们不会被考虑!
{ path: '404, component: My404Page },
{ path: '*', redirect: '/404' }

• 
  
• 参考资料
  

原文地址