Original subtitles

In this lecture, we're going to review the configuration for the Pineal library in our project.

Generally, the first step is to install the package.

Luckily, we can skip this step.

The Create View package installed this package for us just in case you may need to install this package

manually.

You can run the NPM install pin command.

After installing this package, we must register it as a plug in.

Let's stop for a moment and talk about plug ins.

Plug ins are precisely what they sound like.

The new applications can be extended with additional features.

You will most likely download third party libraries to assist you with developing your application.

View provides a way for other libraries to extend it by providing a plug in API.

Plug ins can do almost anything.

They can add directives, register components and even provide another API.

There are two steps to installing a plug in in our project.

First, we need to import it.

Second, we need to register it.

Every plugin must be registered before the Vue instance is created.

Otherwise we might not have access to every feature a plugin provides.

Let's open the main JS file.

The file scaffolded by view is different from before.

In between the Create App and Mount functions, there's additional code.

Registering plug ins must be performed before mounting the instance.

The used method allows us to register a plug in from there.

It's the responsibility of the plugin to extend view.

Registering a plugin is as simple as passing an object to the use function.

In this case, two plugins are being registered called Rooter and Store.

We're going to ignore the router object.

It'll be discussed in another lecture.

Let's put our focus on the create a function.

This function will return an object compatible with Vue's plugin API.

The question is what is Peneha doing behind the scenes?

Peneha is registering a plugin with the Vue developer tools.

The developer tools are completely extendable.

The Peneha package will add a new tool for interacting with the state.

If you want help with debugging, you should always register the plugin.

Let's check out the plugin, switch over to the browser.

Open the view developer tools.

Under the inspector section, we can switch to a different tool.

As you can see, Piniella is listed as an option.

We can select this option to view the data from our application.

At the moment it's going to be empty.

We haven't taken the time to register state with our application.

Let's head back to our editor's.

Inside the source directory, there's a folder called stores before proceeding.

Let's understand why it's being called stores.

When learning state management, the terminology is half the battle.

The word store is short for storage.

We can think of stores as warehouses.

A warehouse can store various items.

We may store food, furniture or common household items.

It's common for warehouses to be subdivided into specific sections.

Food can be put in one section, while furniture can be put in another section.

Otherwise, you're going to be running all over the place searching for items.

This same idea applies to state management.

We can think of our data being put into a warehouse.

We may have different storages for different types of data.

For example, you may have a store for users and a store for blog posts.

In our Project View recommends defining your stores inside this directory.

It's not mandatory, but recommend it for the rest of this course.

We're going to adhere to this practice.

Inside this folder there's a file called Counter JS.

Let's open it inside this file.

A function called Define Store is imported from the Penney package.

This function will create a special type of object.

The object created by this function will have its data tracked.

Penney is meant to be used globally, which can make things tricky.

Multiple components can change the data.

It's important to keep track of those changes, determine which change should be applied and what to

send to other components.

Peneha can handle this sort of task easily.

Any time a change occurs in your state, every component will be notified of the updates.

It'll make sure every component is in sync with the state.

Since changes are tracked, you will have an easier time debugging your application.

This is why we have to call this method.

It creates a special object for keeping track of state.

The object is exported from our script.

Before the object is created.

We're passing in three additional objects called state getters and actions.

Each property will be explored as the course progresses.

That's it.

We've successfully introduced state management into our project.

We can begin to use it for this course.

We're not going to need the counter store.

This example is to demonstrate how a store can be created in future lectures.

We're going to create store files from scratch.

Let's delete this file.

Once you've deleted the file, let's start creating custom stores.

In the next set of lectures, we'll start writing some code.

I'll see you there.