Vue home bucket (Vue + Vue-router + Vuex + axios) (Vue + webpack Project Practice Series II), vuexwebpack

Vue home bucket (Vue + Vue-router + Vuex + axios) (Vue + webpack Project Practice Series II), vuexwebpack

We won't talk about how good the Vue works with the whole family bucket to do the project, and go straight to the topic.

I. Vue

Series 1 has already built a vue project using Vue-cli, so we will not go into details here.

Ii. Vue-router

Vue routing, first presented documents (https://router.vuejs.org/zh-cn ).

What is routing located in the bucket? Create a single-page application! Simple! We know that Vuejs is an application composed of a series of components. Since it is a component, it needs to be combined to map the component (components) to the route (routes ), then, tell vue-router where to render them!

Generally, we use the router-view in the APP. VUE file to tell the router where to render the component. For example, (keep-alive has been commented out for subsequent series ):

　　

Component configuration: (Multiple folders are provided here to facilitate management of large projects and are modularized. For small projects, you only need index. js under the router ).

For resolve, require, and export default in route configuration, refer to this article (http://www.cnblogs.com/nutrient-rich/p/7047877.htmland vue to improve user experience)

　　

The routes are configured according to the preceding method, so how do route jumps between pages? $ router. push () and $ router. replace () can be done.

　　

Route nesting: Add a router-view to the child component and configure it to [route nesting will cause pitfalls during animation and will be updated later]

　　

The routes used in this project can be basically done.

Iii. vuex Status Management

Or to present the document first (https://vuex.vuejs.org/zh-cn)

Vuex is a State Management Mode Designed for Vue. js applications. What is status management? It can be simply understood as managing data streams. Multiple pages share a data library (global ).

When will I borrow the document language:

　　　　

Speaking of vuex, there will certainly be State, Actions, Mutations, Getters, Moudles

　　(1) State

Vuex uses a single State Tree-State, and an object contains all application-level states. The place where data is shared on the page. (It is better to store private data in your own. vue file)

　　(2) Actions

Action is similar to mutation. The difference is:

• Action submits mutation instead of directly changing the status.
• Action can include any asynchronous operation.

That is to say, the asynchronous method is put into Actions, such as ajax requests. After obtaining the data, the method in the submitted mutation is displayed to change the state.

　　(3) Mutations

The only way to change the status in the Vuex store is to submit mutation. One important principle is to remember that mutation must be a synchronous function. Used in componentsthis.$store.commit('xxx')Submit, used in actioncommit('xxx')Submit.

　　(4) Getters

Sometimes we need to generate some States from the state in the store. Vuex allows us to define "getters" in the store (which can be considered as the computing attribute of the store ). Getters accepts state as its first parameter:

　　

　　Getters is exposedstore.gettersObject.

　　

　　(5) Modules

Simply put, it is modular to facilitate operation and management.

Because a single State Tree is used, all the States of an application are centralized to a large object. When the application becomes very complex, the store object may become quite bloated.

To solve the above problem, Vuex allows us to split the store into modules ). Each module has its own state, mutation, action, getter, and even nested submodules-separated in the same way from top to bottom.

The last few pictures help you to view the specific statement:

　　

　　

　　

 

 Iv. axios

Is the encapsulated ajax, which can be encapsulated based on your project and then called in the action. See https://github.com/mzabriskie/axios for details

　　

Conclusion: make persistent efforts!