Vuex concept understanding and practical tutorials

I have been studying Vuex2.0 recently, and after working on it for several days, I finally got a clue.

First of all, there are many vuex concepts. You must understand the concepts inside. You can refer to the official website Vuex2.0 concept. The purpose of writing this article is to provide a reference for front-end enthusiasts and deepen their understanding of vuex2.0. Understanding of core concepts.

Stop talking nonsense and get straight to the practical stuff. This is an example of counting on the official website.

Let’s start a project first.

First step, download and install the vue project

Open git and run npm install --global vue-cli This is the command line to install vue (you need to run this command for the first installation , if vue-cli has been installed before, there is no need to install it here)

$ vue init webpack my-project (my-project here is the name of your project, you can choose it arbitrarily)

$ cd my-project (enter my-project my project folder)

$ npm install (Install the project source files relied on in package.json. If you are a beginner, you can install eslint and router. Banned)

$ npm run dev (Run this project)

Second step, install Vuex

In basic Vuex, you must first install vuex into the project. For details, please see the Vuex official website to download and install. Vuex official download channel

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

After the installation is complete, create the file. The created file directory is as follows:

First, in Counter.vue we write to the view to display Content:

Then configure store.js

Configure main.js

Now you can run the project and see the effect

Example 2.

Then let’s do something more advanced, disassemble the content in the vuex file and write it into component form, so as to deepen our understanding of the core concepts in vuex (state, getters, mutations, actions, modules ) understanding. In order to distinguish, I started a new project vuex-2-demo.

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

Then configure Counter.vue,

Then take a look at the store’s entry file index. js

Next is the actions.js file

Next is the mutations.js file

The following is getters.js

Okay, next is the main file main.js

The above is the detailed content of Vuex concept understanding and practical tutorials. For more information, please follow other related articles on the PHP Chinese website!