What does the vue.js family bucket include?

vue.js family bucket package includes: 1. [vue vuex] state management; 2. [vue-router] routing; 3. [vue-resource]; 4. axios; 5. UI framework.

【Recommended related articles: vue.js】

vue.js Family Bucket Packages include:

vue family bucket: vue vuex (state management) vue-router (routing) vue-resource axios UI framework (iview, vant, elementUI, etc.)

Vue There is the 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 construction tool vue-cli and sass style, it is the core component of a complete vue project.

To summarize: 1. Project construction tool, 2. Routing, 3. State 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 the scaffolding for quickly building this single-page application.

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

2. vue-router

Installation: npm installvue-router

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

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

Also note that during use, You can use Vue's transition attribute to render the effect of switching pages.

3. vuex

The state management developed by vuex specifically 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 directly called in the component. In addition to mudle,

1, state

is similar to the data of the vue object, used to store data and status. The stored data is responsive. If the data changes, the components that rely on the data will also change accordingly.

Examples of two ways to obtain state:

The first way:

store.getters['getRateUserInfo']

The second way:

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

Note: You can use mapState to change the global State and getters are mapped to the computed properties of the current component.

2. actions

Action is triggered through the store.dispatch method: action supports asynchronous calls (you can call api), mutations only support operation synchronization, and actions submit mutations instead of direct changes. state.

For example:

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 pass context.state and context. getters to obtain state and getters.

In practice, we often use ES2015 parameter destructuring to simplify the 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 changes, and it accepts state as the first parameter.

4. Getters

Vuex allows us to define "getters" in the store (which can be considered as computed properties of the store). Just like computed properties, the return value of a getter will be cached according to its dependencies, and will only be recalculated when its dependency values ​​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 the getters in the store to local computed properties.

4. axios

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

Installation:

npm install axios --save

Example:

1.Send a GET request

//通过给定的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.Send A POST request

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

5. Match UI frameworks such as: iview, vant, elementUI

iview A set of high-quality UI component libraries based on Vue (divided into small programs and PC version);

vant is a lightweight and reliable mobile Vue component library. It is a set of mobile component libraries based on Vue 2.0 open sourced by Youzan, aiming to develop faster and easier. Beautiful and easy-to-use mobile site based on Vue.

Ant Design Vue is the Vue implementation of Ant Design, which develops and serves enterprise-level backend products.

elementUI is based on the Vue 2.0 desktop middle and backend component library.

Related free learning recommendations: JavaScript (video)

The above is the detailed content of What does the vue.js family bucket include?. For more information, please follow other related articles on the PHP Chinese website!