Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is a vue family bucket". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vue has a famous family bucket series, including vue-router,vuex, vue-resource. Coupled with the vue-cli,sass style of the build tool, it is the core of a complete vue project.

To sum up, it is:

1. Project building tools

2. Routing

3. State management

4. Http request tool.

The following is described separately

Two core ideas of Vue: component-based and data-driven. Componentization: divide the whole into reusable individuals, data-driven: directly affect the bom display through data changes, and avoid dom operations.

1. Vue-cli is the scaffolding for quickly building this single-page application.

# Global installation vue-cli$ npm install-- global vue-cli# creates a new project based on webpack template $vue init webpack my-project# installation dependency, you $cd my-project$ npm install$ npm run dev

II. 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 in use, you can use the transition properties of vue to render the effect of switching pages.

III. Vuex

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 process is as follows: the above four parts can be called directly in the component except mudle

1 、 state

Data, which is similar to vue object, is used to store data and state. The stored data is responsive, and if the data changes, the components that depend on the data will change accordingly.

Examples of two ways to get state:

1.store.getters ['getRateUserInfo']

2. MapGetters ({

UserInfo: 'login/UserInfo', / / user information

MenuList: 'getMenuList', / / approve Freight rate approval

RateUserInfo: 'getRateUserInfo' / / Rate user information

})

Note: global state and getters can be mapped to the computed calculation properties of the current component through mapState.

2 、 actions

Action is triggered by the store.dispatch method: action supports asynchronous calls (you can call api), mutation only supports operation synchronization, and action submits a mutation instead of directly changing the 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 you can get the state and getters through context.state and context.getters.

In practice, we often use parameter deconstruction of ES2015 to simplify the code (especially if we need to call commit many times):

3 、 mutation

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

4 、 getters

Vuex allows us to define "getter" in store (which can be thought of as a computational property of store). Just like calculating properties, the return value of getter is cached according to its dependency and is recalculated only if its dependency value changes.

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

The mapGetters helper function simply maps the getter in store to a local evaluation attribute:

IV. Axios

Axios is a http request package. Axios is recommended on the official website of vue for http calls.

Installation:

Npm install axios-save

Example:

1. Send a GET request

/ / send the request axios.get ('/ user?ID=12345'). Then (function (response) {console.log (response);}) .catch (function (err) {console.log (err);}); / / the above request can also send 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);}); that's it for "what is a vue bucket?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.