Last week, a friend asked me about VUex. It happened that I also needed vuex for an independent project last time, but I found that I didn’t know how to use it, so I went to the official website API. See a confused, baidu is a variety of information. Ps :(this article is only for Vuex beginners), if you have a thorough understanding of it, or god, it is not suitable for you.

First, the official line:

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

Vuex is a front-end database that stores global, common data and provides methods to retrieve and modify the data.

Core concepts :(Store, state, Mutations, mutation-type.

Store is like a database, which puts data (state). If I want to modify the data, I use Mutations (commit), and the logic for modification is written here (Action). I can also directly modify the results in Mutations, but it cannot be changed asynchronously.

Take my project as an example:

My project framework directory structure diagram is as follows:



The name of the folder,

Shendun: Project name, Store: This folder is used to hold the state management pool, which I use as a front-end database.

Start instance:

Find main.js in the project and inject store at the root



The index.js folder in the Store folder introduces Vuex



At this point Vuex is introduced and registered. Then I start putting a public data inside state

By default I write a testName:”xiaohong” in state.js.



And then I’m going to modify this data, in retro.js



Note: modifyName is the method name defined by myself (this Demo is used to modify our default defined testName), data is the data we need to pass in after modification, state.testName is the initialization data defined in the state. TestName output is “xiaohong”.

Everything is ok, then I go to the page I need if you call (indexIntroduceEntrance. Vue),



Mounted () calls the modify method and prints out whether our data has been modified successfully. The parameter I passed in is liuZhiqiang.

See the console print result as shown below:



TextName was successfully changed from “xiaohong” to “liuZhiqiang”. Trigger method we use commit, as shown above this. codestore.com MIT (‘modifyName’,data),data is the parameter we want to enter and exit.

For the second method, we use mutation-types. Js, which actually stores the constants of the function method names.

Continuing with the previous example,



Export a constant modifyName in mutation-types.js

Retro.js introduces the constants that we define



Use [modifyName] for the method name

IndexIntroduceEntrance. Vue will change as shown in figure:



First, introduce mapMutations(auxiliary function) from Vuex, deconstruct methods… MapMutations (), the method call directly this.modify() is different from the original commit(‘modify’)

Console output:



This is the end of the article, if you have any questions or errors, contact me or leave a comment

author:[email protected]