Vue著名的全家桶系列是什么

　　介绍

小编给大家分享一下Vue著名的全家桶系列是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

Vue有著名的全家桶系列,包含了<代码> vue-router ,<代码> vuex ,<代码> vue-resource> vue-cli ,<代码> sass 样式,就是一个完整的Vue项目的核心构成。

概括起来就是:

<强> 1项目构建工具

<强> 2路由

<强> 3,状态管理

<强> 4,http请求工具。

下面单独介绍

<强>前言: Vue两大核心思想:<强>组件化和数据驱动强。组件化:把整体拆分为各个可以复用的个体、数据驱动:通过数据变化直接影响bom展示,避免dom操作。

#全局安装vue-cli 　　npm安装全球vue-cli美元 　　#创建一个基于webpack模板的新项目 　　美元vue init webpack我的项目 　　#安装依赖,走你 　　美元 　　光盘我的项目 　　美元npm安装 　　美元npm运行dev

安装:npm installvue-router

如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:

进口Vue从# 39;Vue # 39; 　　进口VueRouter从# 39;vue-router& # 39; 　　Vue.use (VueRouter)

另外注意在使用中,可以利用vue的过渡属性来渲染出切换页面的效果。

vuex为专门为vue。js应用程序开发的状态管理可以理解为全局的数据管理.vuex主要由五部分组成:状态,行动,突变,getter, mudle组成。

使用流程是:组件中可以直接调用上面四个部分除了mudle,

<强> 1,国家

类似vue对象的数据,用来存放数据以及状态。存放的数据为响应式,如果数据改变,那么依赖数据的组件也会发生相应的改变。

获取状态的两种方式例子:

1. store.getters [& # 39; getRateUserInfo& # 39;]

2。…mapGetters ({

用户信息:& # 39;登录/用户信息# 39;,//用户信息

menuList: & # 39; getMenuList& # 39;,//批准运价审批

RateUserInfo: & # 39; getRateUserInfo& # 39;//率用户信息

})

注意:可以通过mapState把全局的状态和getter映射到当前组件的计算计算属性中。

<强> 2,行动

操作通过商店。派遣方法触发:行动支持异步调用(可以调用api),突变只支持操作同步,并且行动提交的是突变,而不是直接变更状态。

例如:

常量存储=new Vuex.Store ({ 　　状态:{ 　　数:0 　　}， 　　突变:{ 　　增量(状态){ 　　state.count + + 　　} 　　}， 　　行动:{ 　　增量(上下文){ 　　context.commit(& # 39;增量# 39;) 　　} 　　} 　　})

操作函数接受一个与商店实例具有相同方法和属性的背景下对象,因此你可以调用context.commit提交一个突变,或者通过上下文。状态和上下文。getter方法来获取状态和getter。

实践中,我们会经常用到ES2015的参数解构来简化代码(特别是我们需要调用承诺很多次的时候):

<强> 3,变异

每个突变都有一个字符串的事件类型(类型)和一个回调函数(处理器)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受国家作为第一个参数。

<强> 4,getter

Vuex允许我们在商店中定义“getter”(可以认为是商店的计算属性)。就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

const getter={ 　　getRateInitData:状态=比;state.rateInitData, 　　getchooseRateObj:状态=比;state.chooseRateObj, 　　getSearchRateParams:状态=比;state.searchRateParams, 　　getSearchRateResult:状态=比;state.searchRateResult, 　　getRateUserInfo:状态=比;state.RateUserInfo, 　　getMenuList:状态=比;state.menuList, 　　getRateQueryParams:状态=比;state.rateQueryParams, 　　getRateQueryResult:状态=比;state.rateQueryResult, 　　getCheckRateDetailParams:状态=比;state.checkRateDetailParams, 　　getReferenceCondition:状态=比;state.referenceCondition, 　　getWaitApprovalParams:状态=比;state.waitApprovalParams 　　}

mapGetters辅助函数

mapGetters辅助函数仅仅是将存储中的getter映射到局部计算属性:

axios是一个http请求包,vue官网推荐使用axios进行http调用。

安装:

npm安装axios——保存

例子:

Vue著名的全家桶系列是什么