Vuex getting started and vuex getting started

Vuex getting started and vuex getting started

What is Vuex?

Official explanation: Vuex is a State Management Mode Designed for Vue. js applications. It uses centralized storage to manage the status of all components of an application, and uses corresponding rules to ensure that the status changes in a predictable manner.

I believe many new players have a sense of despair after reading this passage. At first, I thought of an analogy!

For example, a certain grade has five small classes, each of which has 25 students, but only one teacher teaches. If five small classes correspond to five components, the 25 students in each class are equivalent to 25 pieces of data in each component. This teacher is equivalent to vuex, and the class taught by the teacher is equivalent to every piece of data. To ensure that each student receives the same education, the teacher needs to talk about each lesson five times separately. The same effect cannot be guaranteed for the students in each class. After a while, the teacher thought it was very troublesome and tired. He thought of a way to find a large classroom and merge the students in these five small classes, in this way, you only need to talk about each course once, and ensure that the effects of each course are the same. This is the role of vuex. It manages and distributes the data used by each component in a unified manner, saving time and effort.

How to use this vuex? Let's start with a simple Vue count Application

I. Basic usage

1. initialize and create a project

vue init webpack-simple vuex-democd vuex-demonpm install

2. Install vuex

npm install vuex -S

3. Create the store. js file in the src directory, and import and configure the file in the main. js file.

Write Data in store. js

Import Vue from 'vue '// introduce vuex and useimport Vuex from 'vuex' vue. use (vuex)

Main. js File

Import Vue from 'vue 'import App from '. /App. vue 'import store from '. /assets/store' // import the store object new Vue ({// configure the store option and specify it as the store object. The store object is automatically injected into all sub-components, use this. $ store accesses this store object store, el: '# app', render: h => h (app )})

4. Edit the store. js File

Before applying vuex, we still need to understand this flowchart, which is actually very simple.

Vuex

① Vue Components is our vue component. The component will trigger some events or Actions, that is, Actions in the figure;
② The actions we send in the component must be to retrieve or change data. However, in vuex, data is centrally managed and cannot be changed directly, therefore, this action is committed to Mutations;
③ Then Mutations will change the data in the (Mutate) State;
④ When the data in the State is changed, it will be re-rendered to the Vue Components. The component will display the updated data and complete a process.

The core of Vuex is Store, which is equivalent to a container. A Store instance contains the following attributes:

State defines attributes (status, data)

Write Data in store. js

// Define the property (data) var state = {count: 6} // create the store object const store = new Vuex. store ({state}) // export the store object export default store;

Method 1: In app. vue, you can use this. $ store to access the store object and obtain the count.

<Template> <div id = "app"> // write the count method directly, you can run 

Method 2: Access by mapGetters and mapActions provided by vuex
MapGetters is used to obtain attributes (data)

① Introduce mapGetters in app. vue
import {mapGetters} from 'vuex'
② Call the mapGetters auxiliary method in the calculation attribute of the app. vue file, input an array, and specify the attribute count to be obtained in the array.
<Script> import {mapGetters, mapActions} from 'vuex' export default {name: 'app', computed: mapGetters ([// here the count corresponds to the following store. in the js file, the count in getters corresponds to 'Count'])} </script>
③ Define the getters method in store. js and export it
Getters is used to obtain attributes.

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex) // defines the property (data) var state = {count: 6} // defines gettersvar getters ={// parameters need to be passed, used to obtain the state attribute count (state) {return state. count }}// create the store object const store = new Vuex. store ({state, getters}) // export the store object export default store;
In this way, the data is displayed on the page! Next we will change the obtained data through the action
④ Define and export the actions and mutations methods in store. js
Actions definition method (Action)

Commit submits changes. The only way to modify data is to submit mutations displayed.

Mutations defines changes and processes changes in status (data)

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex) // defines the property (data) var state = {count: 6} // defines gettersvar getters = {count (state) {return state. count }}// defines actions, the action to be executed, such as process judgment and asynchronous request const actions ={// ({commit, state }) in es6, the object deconstruct increment ({commit, state}) {// submits a change named increment. The name can be customized and can be considered as a type name, corresponds to the increment in the mutations below // commit submits changes. The only way to modify the data is to explicitly submit mutations commit ('credentials')} // define mutations, changing the processing status (data) const mutations = {// corresponds to the 'credentials' (state) {state in the preceding commit. count ++; }}// create the store object const store = new Vuex. store ({state, getters, actions, mutations}) // export the store object export default store;
⑤ Introduce mapActions in app. vue and call
MapActions is used to obtain methods (Actions)

import {mapGetters,mapActions} from 'vuex'
Call the mapActions auxiliary method and input an array to specify the method increment to be obtained in the array.
<Template> <div id = "app"> // The increment method corresponds to the increment in the following methods. <button @ click = "increment"> Add </button> <button> reduce </button> 

In this way, you can use the button to change the obtained count.
It seems that it is really difficult to understand. You need to understand the principle carefully and then deepen your understanding.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.