Vuex2.0 learning and recording + two small examples, vuex2.0 learning examples

Vuex2.0 learning and recording + two small examples, vuex2.0 learning examples

Recently, after studying Vuex2.0, I finally got a little clue.

First of all, there are many vuex concepts. You must understand them. You can refer to the Vuex2.0 concept on the official website. I wrote this article to provide a reference for front-end fans, deepen understanding of the core concepts of vuex2.0.

Let's just talk about it. This is a counting instance on the official website.

Start a project first.

Step 1. download and install the vue Project

Open git and run npm install -- global vue-cli. This is the command line for installing vue. (run this command for the first installation. If you have installed vue-cli before, you do not need to install it again)
$ Vue init webpack my-project (my-project here is your project name, which can be any one)
$ Cd my-project (go to my-project my project folder)
$ Npm install (install the dependent project source files in package. json. If you are a beginner, you can disable eslint and router)
$ Npm run dev (run this project)

 

Project initiated successfully

 

Step 2. Install Vuex

In basic Vuex, you must first install vuex In the project. For more information, see the Vuex official website. Official Vuex download Channel

Here I directly used NPM to install and download. The method is simple. Open the terminal and enter npm install vuex-S

Download and install Vuex

After the installation is complete, create a file. The Directory of the created file is as follows:

The current file directory is like this

First, write the content to be displayed in the view in Counter. vue:

Counter. vue

Then configure store. js

 

Store. js

Configure main. js

 

Main. js

Now you can run the project and check the effect.

 

Running successful

Example 2,

Next, let's take the content in the vuex file apart and write it as a componentized form to deepen the core concepts (state, getters, mutations, actions, modules) in vuex). In order to differentiate, I had a new project vuex-2-demo.

Let's take a look at the project directory first:

 

Vuex-2-demo project catalog

Configure Counter. vue,

 

Counter. vue

Next, let's take a look at index. js, the store entry file.

 

Index. js

The following is the actions. js file.

 

Actions. js

Next is the mutations. js file.

 

Mutations. js

The following is getters. js.

 

Getters. js

Okay, next is the main file main. js.

 

Main. js

All the files have been configured. You can run it. Open the terminal and enter npm run dev.

You will see the same effect as in the first demo.

Running success chart

Well, two simple vuex2.0 demos have been completed. This example applies to beginners. Of course, you are also welcome to check and correct yourself. I am keen on the front-end and welcome the front-end fans to talk about it.

Summary:
Through these two small examples, I have successfully configured Vuex2.0 and successfully ran it, deepening my understanding of the core concepts of Vuex2.0.

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!