DR：随着单页应用程序（spa）正迅速成为开发前端应用程序的实际方式，开发人员面临的主要问题之一是如何管理分布在应用程序周围的所有组件之间的状态。Vuejs应用程序也不例外。要解决此问题，您将通过实践指南学习如何使用Vuex管理Vue.js版轻松应用。如果您需要这里讨论的应用程序的参考实现，请参阅本文。"希望学习Vuex来管理@vuejs应用程序的状态吗？这就是地方。"在推特上留言先决条件在开始阅读本文之前，您应该已经熟悉了两种技术：JavaScript和Vue.js版. 你也许可以不使用Vue.js版以前。但是，如果你不懂JavaScript，你将很难（很有可能）。除了这些知识，你还需要节点.js在你的机器上安装了NPM。如果您还没有这些工具，请查看此资源以安装这些工具（顺便说一句，NPM捆绑到节点.js).Vuex正在运行在本节中，您将通过一本实用指南学习如何使用Vuex构建一个简单的比特币仪表板模拟，以显示比特币的当前价格，并随着时间的推移进行更新。除了价格，你的应用程序还将实时显示百分比增长和价格差异。最后，你的应用程序将显示前四个价格的历史记录以供参考。为了使事情井井有条，你将把你的应用分成四个部分：主要组件：这个已经存在，它被称为App。一个组件，显示当前比特币价格以及它与前一个价格的区别（下图中的绿色方框）。一个组件，显示当前价格与上一个价格之间的百分比变化，以及更新发生的时间（这是下图中的蓝色框）。显示比特币定价历史记录的组件（此组件位于蓝色和绿色方框下方的表格中）。最后，您将得到一个如下所示的应用程序：注意：这里不会使用真正的比特币价格。您将编写一些伪样本，北京大数据，然后根据该样本生成随机值。搭建一个新的Vue.js版应用程序把你的新Vue.js版应用程序，大数据和数据分析区别，您将使用Vue CLI工具。因此，如果开发环境中尚未安装此CLI，请打开终端并运行以下命令：npm安装-g@vue/cli安装成功后，导航到要保存项目的目录，然后运行下面的命令创建一个新的Vue.js版应用程序：创建比特币仪表板运行此命令将提示您选择一个预设，如果您安装了Yarn，则会询问您是否希望使用它而不是NPM。您可以随意选择您喜欢的答案，但是本文将使用预设和NPM作为依赖关系管理工具。在做出选择之后，Vue CLI工具将构建应用程序并安装基本依赖项。完成后，您可以进入新项目并运行它以查看是否一切正常：#进入新应用程序cd比特币仪表盘#用NPM运行它npm跑发球现在，如果你打开：8080/在浏览器中，您将看到以下屏幕：然后，要关闭服务器，可以按以下键：Ctrl+C。安装Vuex和其他依赖项以及你的Vue.js版app，你还需要安装另外三个依赖项：Bootstrap、Vuex本身和Font Awesome（免费版本）。要安装它们，请确保您位于项目根目录下并运行以下命令：npm安装--保存\bootstrap vuex@fortawesome/fontawesome免费创建Vuex存储要开始设置Vuex存储，请在src内创建一个名为store的新目录。您将使用此目录保存与Vuex存储区相关的所有文件。然后，如前所述，你将用一个假的样本启动你的比特币应用程序。为此，您需要创建一个名为价格.js在存储目录中，并向其中添加以下代码：现在常数=日期。现在();常数2秒=2000；常数价格=[{金额：7322.89，时间戳：现在},{金额：6322.02，时间戳：现在-两秒钟，},{金额：5222.64，时间戳：现在-（2秒*2），},{金额：5242.61，时间戳：现在-（2秒*3），}];出口违约价格；正如您所看到的，在您刚刚创建的文件中，您定义并导出了一组比特币历史价格和创建时间的数组。请注意，您提取了准确的日期(日期。现在（））您的应用程序开始运行以定义上次创建价格的时间。另外，创建一个名为twoSeconds的常量，并使用它来计算其他假价格的创建时间。换句话说，您正在创建一个模块，该模块定义一个具有四种价格的数组：7322.89：获取应用程序开始运行日期的最新价格；6322.02：获取应用程序开始运行日期的第二个最新价格减去2秒；5222.64：获取应用程序开始运行日期的第三个最新价格减去4秒；和5242.61：最早的价格，它获取应用程序开始运行的日期减去6秒。有了这个文件，万云，接下来需要做的就是创建一个文件，在其中定义应用程序中可用的Vuex操作。为此，请创建一个名为动作.js在存储目录中，并向其中添加以下代码：常量操作={UPDATE_PRICE:'更新价格'};导出默认操作；此文件只包含一个操作，因为这是应用程序中唯一需要的操作。以这种方式将操作放在单独的文件中有助于更好地组织代码，并防止在应用程序中重复字符串名称。现在，你终于可以创建你的商店了。创建一个文件索引.js在src中添加以下代码：从'Vue'导入Vue；从'Vuex'导入Vuex；从'./prices'导入价格；//为模块配置VuexVue.使用（Vuex）；const store=新建Vuex.商店({国家：{价格：价格},吸气剂：{currentPrice:状态=>{返回国家价格[0]；},previousPrice:状态=>{返回国家价格[1] ；},百分比增加：（state，getters）=>{常量电流=getters.currentPrice.金额;常量上一数量=getters.previousPrice.amount;返回(（（本期金额-以前金额）/以前金额）*100).t固定（2）；},区别：（state，getters）=>{常量电流=getters.currentPrice.金额;常量上一数量=getters.previousPrice.amount;return（currentAmount-以前的amount）.toFixed（2）；}},突变：{更新价格（州，新定价）{//删除最旧的价格state.prices.pop();//加上新的价格国家价格=[新定价。。。国家价格];}}});导出默认存储；从"./actions"导出{default as actions}；在这个文件中有很多内容，你最好逐步学习。首先，导入所需的所有模块：从'Vue'导入Vue；从'Vuex'导入Vuex；从'./prices'导入价格；之后，您将配置Vue.js版要使用Vuex：Vue.使用（Vuex）；然后，创建一个Vuex存储的新实例（新建Vuex.商店)所有设置都是用对象声明的。在传递给Vuex的配置对象中，首先要定义的是带有假价格的默认状态对象：国家：{价格：价格；}然后，大数据的培训，创建一个getter来计算并返回当前比特币价格（currentPrice）：currentPrice:状态=>{返回国家价格[0]；},在此之后，您将为之前的比特币价格（previousPrice）创建另一个getter：previousPrice:状态=>{返回国家价格[1] ；},对于，您正在为当前价格与上一个价格之间的百分比差创建第三个getter（percentageIncrease）：百分比增加：（state，getters）=>{常量电流=getters.currentPrice.金额;常量上一数量=getters.previousPrice.amount;返回(（（本期金额-以前金额）/以前金额）*100).t固定（2）；},最后，您将为当前和以前的价格（差异）之间的差异创建最后一个getter：区别：（state，getters）=>{常量电流=getters.currentPrice.金额;常量上一数量=getters.previousPrice.amount;return（currentAmount-以前的amount）.toFixed（2）；}接下来，你要定义你的Vue.js版应用程序。在这个应用程序中，你只需要一个更新比特币价格的突变：突变：{更新价格（州，新定价）{//删除最旧的价格state.prices.pop();//加上新的价格国家价格=[新定价。。。国家价格];}}如您所见，UPDATE_PRICE变异在其有效负载中接收新的PRICE数据，从prices数组中删除最旧的PRICE，并在数组的开头插入一个新的PRICE。最后，导出存储和操作，以便其他组件可以使用它：导出默认存储；从"./actions"导出{default as actions}；就这样！您的Vuex存储已完全完成。定义您的Vue.js版组件现在你的商店已经准备好了，可以开始定义应用程序组件了。如前所述，淘客app制作，你的应用程序将包含三个组件（除了名为app的主要组件外）。一个显示当前比特币价格以及之前和当前价格之间的差异。一个显示当前比特币价格与之前比特币价格之间的百分比差异，并显示上次更新时的百分比。一个显示比特币价格细节的组件。这个