Vue family Bucket (vue+vue-router+vuex+axios) (Vue+webpack Project Combat Series II)

Vue how excellent with the whole family barrels do the project how good and so on I will not talk about, straight to the subject.

One, Vue

Series one has built the Vue project with VUE-CLI, and here does not repeat it.

Second, Vue-router

The routing of Vue, presenting the document (https://router.vuejs.org/zh-cn/) first.

What is the location of the route in the family bucket, create a single page app! Simple! We know that Vuejs is a series of component applications, since it is a component that needs to be combined to map components to routes (routes) and then tell Vue-router where to render them!

We typically use Router-view in the App.vue file to tell router where to render the component, such as (Keep-alive is commented on in the following series):

　　

Component configuration: (There are multiple folders here that are easy to manage for large projects, modular.) For small items you can just router the index.js below).

As for the resolve and require in the routing configuration and export default can refer to this article (Http://www.cnblogs.com/Nutrient-rich/p/7047877.html and Vue on-demand loading to enhance the user experience)

　　

Routing according to the above to configure the various routes, then between the pages need to route jump how to do it $router.push () and $router.replace () can do.

　　

Route nesting: Add a Router-view to the subassembly and configure it to "route nested in the animation when there will be pits, subsequent updates"

　　

The routes used in this project are basically going to be done.

Third, Vuex state management

or the first document (https://vuex.vuejs.org/zh-cn/)

Vuex is a state management model developed specifically for vue.js applications. What is state management? It can be simply understood as managing the flow of data, and multiple pages share a single data library (global).

I borrowed the document language when I used it:

　　　　

When it comes to Vuex, there must be state, Actions, mutations, Getters, moudles

(1) State

Vuex uses a single state tree--state, with an object that contains all the application-level states. is the place where pages share data. (Private data is better than putting your own. Vue file)

(2) Actions

Action is similar to mutation, except that:

• The Action commits the mutation instead of changing the state directly.
• An action can contain any asynchronous operation.

This means that an async method is put into actions, such as an AJAX request, and a plea gets to the data to show the method that commits the mutation to change state.

(3) Mutations

The only way to change the state in the Vuex store is to submit mutation. One important principle is to remember that mutation must be a synchronous function. component, use commits within this.$store.commit(‘xxx‘) the action commit(‘xxx‘) .

(4) Getters

Sometimes we need to derive some states from the state in the store, Vuex allows us to define "getters" in the store (which can be considered as the computed property of the store). Getters accepts state as its first parameter:

　　

　　Getters are exposed as store.getters objects for invocation.

　　

(5) Modules

Simple point is to facilitate the operation and management, modular.

Because a single state tree is used, all states of the app are concentrated into a larger object. When an application becomes very complex, the store object can become quite bloated.

To solve these problems, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, or even nested submodule-the same way it is split from top to bottom.

The last few diagrams make it easy to read the exact wording:

　　

　　

　　

Iv. Axios

Is the encapsulated Ajax, which can then be encapsulated according to its own project situation, and then invoked in action. Refer to Https://github.com/mzabriskie/axios for details

　　

Conclusion: This article is only to talk about the use of family barrels, in-depth discussion to follow up again!

Vue family Bucket (vue+vue-router+vuex+axios) (Vue+webpack Project Combat Series II)