In this article, we will create an application to scan movies with API. We won't use the target - oriented component. In this article, I'll explain how the new API works and how we can organize our applications through it.
When we're done, we see things like this:
The application will search the movie through the open movie API database and display the results. The reason for creating this application is that it's simple, not distracting from new API research, but complex enough to show how APIs work.
Project configuration
To do this, we will use Vue cli to quickly create the necessary environment.
Here you can see the default folder structure:
If you don't want to install all the dependencies on your local computer, you can also start a project at codesandbox. The codesandbox has a good framework for launching the most important projects, including Vue.
New API connection
The generated source code uses the old API Vue 2. In order to use the new API Vue 2, we have to install a layout plug-in.
After installation, we must add to the main.js plug-in:
Plug in composition is additive: this means that you can still create and use the old components and start using the new component composition API.
We have four parts:
- App.vue: parent component. He will deal with API challenges and liaise with other departments.
- Header.vue: main component, receive and display page title
- Movie.vue: it will show each movie. The movie object will be treated as an attribute.
- Search. Vue: it consists of an input element and a search button. This component will provide a search standard when sent in the form of.
Component development
Let's write our first part, leadership:
The declaration of the props property part is the same as before. You list the variables that are expected from the parent's component as an array or object. These variables will be available in the template {Title} and the setup method.
The new approach here is setup. It runs on the original props authorization. The setup method can recover an object and its properties will be merged with the template context: this means they can be in the template. This recovered facility is also a place to respond to the life cycle. We'll see examples of this in the search section.
Then create the search component:
Search for part of the track key and keep the input value in movietitle. When we're done, press the send button, which sends the current search to the parent component.
The setup method has two parameters.
The first parameter is the props named object of a variable. You can use the structure of an object to access its properties. This option is invalid, which means that the setup function will restart when the input property changes.
The second parameter is the object of the context. The attributes listed here can be found in API 2. X: attributes, slots, parent, root, emit.
The next new element is the ref function. Part of the reactive system of the ref function is in Vue. When called, it creates a response variable, which is a value. The value attribute will have the value of passing parameters to the ref function. This is a reaction shell around the original value. In a template, we don't need to mention the value attribute, which will open us. If we put an object in ref, it will be completely air-jet.
Reactivity means that when we change the value of an object, in our case, the value of an attribute will know what is changing, and it will need to redisplay the connected template and Restart the tracked function.
Its function is similar to the property returned by the data method of an object.
Unite
The next step is to propose a parent component header and search component, apple component. It will listen to the search events in the search section, start the API, change the search criteria, and transfer the discovered movies to the movie component list.
Modify Apple components as follows:
Here, we use two new elements: reactive and watch.
The reactive function is equivalent to Vue. Observable) in Vue 2. It makes the submitted object a jet: source object and convert it to a proxy) based on es2015 proxy. For objects returned from reactive, we can call properties directly (without value), instead of returning objects from ref functions. If you want to find a similar API, Vue 2. X, the data method will match it.
One disadvantage of the reactive object is that we cannot extend it to the returned object with the setup method.
The watch function expects a function as an input parameter. It keeps track of all response variables, like templates made by components. When we change a response variable to use in a given function, the function will start again. In our example, whenever the search variable changes, the search will be started.
There is also a component that shows each entry of the movie:
The movie component receives a variable movie display and displays its name and image. A special part is that for the ALT image field, we use title based computed text.
The computable computed function takes the getter's function and wraps the returned variable as reactive. The returned variable has the same interface, which is returned from the ref function. The difference is that it is only read. When the same getter function is restarted, one of the response variables within the getter function changes. If the computed function returns an unhandled original value)（
Component reconstruction
We put him on the apple. Apple components will now only handle submitted activities:
This is all; we have completed a new API composition applet.
conclusion
Let's summarize the issues we have considered in this article.
Vue 3 will provide many new features:
- Setup: it is located in the component and controls the logic of the component. After startup, it first approves props and takes the program and context as parameters
- Ref: return a counter variable, start a new mode. When you change it, we can control its value through the value attribute.
- Reactive: returns an agent-based jet object). When changing a jet variable, it starts the duplicate visualization of the template. We can change its value without affecting the value performance.
- Computer: return a reactance variable according to the parameters of receiving function, track the change of reactance variable and re evaluate the change
- Watch: tracks changes in the jet arguments and restarts when the jet arguments are changed
I hope this example introduces you to the new API and dispels your doubts about it.
Original article: G á bor so ó s - build a movie search app using the Vue composition API
Is this article useful to you?
[1/5]