Vue, vue-router, vuex, axios introduction

Vue has a famous family bucket series, including vue-router ( http://router.vuejs.org ), vuex ( http://vuex.vuejs.org ), vue-resource ( https://github.com/ pagekit/vue-resource ). Coupled with the build tool vue-cli, sass style, is the core component of a complete vue project.

To sum up: 1. Project construction tool, 2. Routing, 3. Status management, 4. http request tool.

The following is a separate introduction

Foreword: Vue's two core ideas: componentization and data-driven. Componentization: split the whole into reusable individuals, data-driven: directly affect the BOM display through data changes, avoiding DOM operations.

1. Vue-cli is a scaffold for quickly building this single-page application,

Install vue-cli globally

$ npm install --global vue-cli

Create a new project based on the webpack template

$ vue init webpack my-project

Install dependencies, let's go

$ cd my-project
$ npm install
$ npm run dev

2. vue-router

Install:npm installvue-router

If you use it in a modular project, you must explicitly install the routing functionality via Vue.use() :

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

Also note that in use, you can use vue's transition properties to render the effect of switching pages.

3. vuex

The state management developed by vuex for vue.js applications can be understood as global data management. Vuex is mainly composed of five parts: state action, mutation, getters, and mudle.

The usage process is: The above four parts can be called directly in the component except mudle,

1、state

Similar to vue object data, used to store data and state. The stored data is responsive. If the data changes, the components that depend on the data will also change accordingly.

Examples of two ways to get state:

1.

store.getters['getRateUserInfo']

2.

...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

Note:
You can map the global state and getters to the computed properties of the current component through mapState.
2. Actions

Action is triggered by the store.dispatch method: action supports asynchronous calls (api can be called), mutation only supports operation synchronization, and action submits mutation instead of directly changing the state.

E.g:

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

The Action function accepts a context object with the same methods and properties as the store instance, so you can call context.commit to submit a mutation, or get state and getters via context.state and context.getters.

In practice, we often use ES2015's parameter destructuring to simplify code (especially when we need to call commit many times):

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

3、mutation

Each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state change, and it accepts state as the first parameter.

4、getters

Vuex allows us to define "getters" (think of store computed properties) in the store. Just like a computed property, the return value of a getter is cached based on its dependencies and only recalculated when its dependencies change.

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 helper function

The mapGetters helper function simply maps getters in the store to local computed properties:

Fourth, axios

axios is an http request package. Vue official website recommends using axios for http calls.

Install:

npm install axios --save

example:

1. Send a GET request

// Send the request
with the given
ID

axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });

//
The above request can also be sent in this way

axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

2. Send
a POST request

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});