0°

Vue 全家桶介绍(转)

Vue 全家桶介绍

Vue有著名的全家桶系列,包含了vue-routerhttp://router.vuejs.org),vuexhttp://vuex.vuejs.org), vue-resourcehttps://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,sass样式,就是一个完整的vue项目的核心构成。

概括起来就是:、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

下面单独介绍

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

一、Vue-cli是快速构建这个单页应用的脚手架,

# 全局安装 vue-cli

$ npm install –global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖,走你

$ cd my-project

$ npm install

$ npm run dev

二、vue-router

安装:npm installvue-router

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

import
 Vue 
from'vue'
import
 VueRouter 
from'vue-router'
Vue.use(VueRouter)

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

三、vuex

vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要五部分组成:state action、mutation、getters、mudle组成。

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

1、state

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

获取state的两种方式例子:

1.store.getters['getRateUserInfo']
2. ...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })
注意:
可以通过
mapState
把全局的
state
和
 getters 
映射到当前组件的
 computed
计算属性中。

2、actions

Action 通过 store.dispatch 方法触发:action支持异步调用(可以调用api),mutation只支持操作同步,并且action提交的是 mutation,而不是直接变更状态。

例如:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

 

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

actions
:{
  increment 
({
 commit 
}){
    
commit('increment')
  
}
}

 

3、mutation

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

4、getters

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

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

mapGetters 辅助函数

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

 

四、axios

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

安装:

npm install axios –save

例子:

1.发送一个GET请求

//
通过给定的
ID
来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//
以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
2
、
发送一个
POST
请求
axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

具体参考:https://www.jianshu.com/p/df464b26ae58

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论