vue@cli,vuecli部署

　　本文主要介绍vue-cli配置和Vuex使用的相关信息。Vuex是专门为Vue.js应用开发的状态管理模式。这个介绍很详细，有需要的朋友可以参考一下。

目录

　　前言安装使用模块化管理vuex状态持久性摘要

前言

　　在vue的开发中，我们经常会用到一些全局数据，比如用户信息、用户权限、一些状态等等。我们传统的数据是单向的，要层层传递，这样当遇到一个多组件共享一个数据时，单向的数据很难维护。例如，一个组件嵌套在许多层中，但数据更改方法必须逐层传递。这时候可以引入vuex。

　　Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。

　　以下是vuex官网管理组件间共享状态的流程图。

安装使用

　　我们可以使用npm或yarn在我们初始化的vue-cli项目之间进行安装。

　　npm安装vuex -保存//纱线添加vuex

　　然后我们管理我们的状态，在根目录下的src文件中新建一个store文件夹，然后设置index.js作为store下的入口文件，然后写入我们的一个全局状态。

　　这里的状态是全局状态，getters是一些可以从我们这里派生出来的状态。比如我们需要在状态中划分计数，然后突变就是改变状态的方法。第一个参数是我们状态的对象，第二个参数是我可以传入的值。这里的最后一个动作被提交给突变，而不是直接改变状态。这里的动作可以是异步函数。动作中的函数的第一个参数接收首先与store实例通信的方法和属性的上下文函数，第二个参数由我们传入。

　　使用页面中的状态、从getter派生的状态以及通过动作分派更改状态数据。

　　在这里，我通过vuex中的mapState、mapGetters、mapMutations和mapActions，引入想要与state和getter对应的派生数据、mutation和action，然后就可以直接在vue实例上使用了。当然，我们也可以直接引入我们定义的store，通过store实例获得想要的状态、动作和变异。

　　效果如下图。

　　个人感觉vuex结合map的引入更优雅，所以也用这个方法。更多参考定义方法，请参考vuex官网给出的例子。我只是用了一个我平时用的表格。

　　Vuex官方文件：vuex.vuejs.org/zh/guide/ac…

模块化管理

　　当我们的状态变得大很多的时候，store对象可能会变得非常臃肿，所以我需要用模块化的管理来分离我们的状态文件，这样更有利于我们的维护。

　　修改我们的存储文件下的目录结构，创建一个新的模块目录，并在该目录下创建一个新的main.js。

　　修改后的目录如图所示。js是我们的一些派生状态。

　　然后修改index.js文件代码，如下所示

　　从“vue”导入Vue

　　从“vuex”导入Vuex

　　从导入getters。/getters

　　Vue.use(Vuex)

　　const context=require.context(。/modules ，false，/\。js$/)

　　const moduleStores={}

　　context.keys()。forEach(key={

　　//获取读取的文件名并拦截它

　　const fileName=key.slice(2，-3)；

　　//通过上下文导出文件内容(key)

　　const fileModule=context(key)。系统默认值

　　moduleStores[文件名]={

　　.文件模块

　　}

　　})

　　const store=new Vuex。商店({

　　模块：{

　　.模块仓库，

　　},

　　吸气剂

　　})

　　导出默认存储

　　在这里，我们使用webpack的api来自动导入我们构建的模块。

　　然后，我们所在的组件的页面使用情况基本和之前一样，就是用mapstate获取state的值做了一些改变。因为我们是通过模块导入的，所以现在我们想获得存储区中main下的计数，所以引入了修改后的mapState，用法如下

　　现在我们已经使用模块化管理。例如，如果我们想要创建一个新的状态库，我们只需要在模块下构建它。文件格式导出为main.js

vuex状态持久化

　　当我们使用vuex作为状态管理时，我们刷新浏览器，然后vuex数据就不见了。这时候我们需要一个数据持久化操作，比如我们的数据保存在localstroage，就可以实现。但是如果我们的store模块太多，可能会比较麻烦，所以我们引入了第三方插件库vuex-persistedstate。

　　该方法只需要在我们的store目录的index.js中引入，并在new Stroe中使用，如下所示。

　　在这里，使用我们在插件中介绍的createPersistedState方法就足够了。直接引入的方法是，我们所有的状态都服从一个持久的操作。当然，我们也可以修改配置，并放置一个我们希望持久化的状态，以便进行持久化操作。具体配置我这里没写。具体请参考vuex-persistedstate官方配置。

　　vuex持续状态的Github地址：github.com/robinvdvleu…

总结

　　这里只简单介绍一下vuex的使用方法，更具体的官网使用方法参考官网。Vuex确实方便我们管理一些全局状态，比如动态加载路由时存储的用户信息和路由。在使用小项目的时候，可能会增加我们的复杂度，所以我们在考虑项目前期的时候，尽可能的规划好我们的项目目录结构和数据结构是非常重要的，这对于我们快速开发和维护一个项目是非常重要的。

　　关于使用Vuex配置vue-cli的文章到此结束。有关使用Vuex配置vue-cli的更多信息，请搜索我们以前的文章或继续浏览以下相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。