Official website: https://vuex.vuejs.org/zh/guide/state.html
Vuex is a specially developed for Vue.js application state management
1.vuex solve the problem of sharing the same state between components (to solve the data sharing between different components)
2. The assembly of persistent data inside.
Small items are not recommended by the Ministry of vuex
the first method :
1, src directory create a new folder vuex
2, vuex create a new folder inside store.js
3, installation vuex
cnpm install vuex --save
4, introduced in store.js just created vue introduced vuex and use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5, definition data
/*1.state for storing data * / in the vuex
var state = {
COUNT:. 1
}
. 6, defined mutations which discharge method is a method, the main method for changing the data state inside
was mutations = {
incCount(){
++state.count;
}
}
Expose
const store = new Vuex.Store({
state,
mutations
})
export default store;
The formation of which use vuex:
1. The introduction of store
import store from '../vuex/store.js';
2, registration
default {Export
Data () {
return {
MSG: 'I'm a home component',
VALUE1: null,
}
},
Store ,
Methods: {
incCount () {
. store.commit the this $ ( 'incCount'); / * Trigger which state data * /
}
}
}
3, which acquires state data
this. $ store.state. Data
4, trigger mutations change the state of the data inside
this $ store.commit ( 'incCount') .;
The second method:
Vuex is designed specifically for Vue.js state management
vuex solve the problem of sharing the same state between components. When we encounter multiple application components to share state, you will need to:
A plurality of component depends on the state of the same. The method of parameter passing for nested components will be very tedious, and the inability to transfer state between brothers assembly. It takes you down to learn, practice communication between vue encoding multiple components.
Behavior needs to be changed from the different components of the same state. We often takes his son to change the components referenced directly or multiple copies and synchronization status through the event.
More of these models are very vulnerable, often results in code that can not be maintained. A word from the official website: Vuex is a Vue.js designed for application development of state management.
It uses the status of all components centralized storage management application. The key here is that a centralized storage management. This means that the state would have been required to share is the need to update the communication between components, but now have vuex, on components on both the communications and store. Question naturally resolved.
That is why the official website will be mentioned again Vuex Value for large applications. If you do not plan to develop large-scale single-page application, it can be cumbersome to use Vuex redundant. It is indeed the case - if your application is simple enough, you do not use Vuex.
Vuex is a specially developed for Vue.js application state management
1.vuex solve the problem of sharing the same state between components (to solve the data sharing between different components)
2. The assembly of persistent data inside.
Small items are not recommended by the Ministry of vuex
vuex use:
1, src directory create a new folder vuex
2, vuex create a new folder inside store.js
3, installation vuex
cnpm install vuex --save
4, introduced in store.js just created vue introduced vuex and use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5, definition data
/*1.state for storing data * / in the vuex
var state = {
COUNT:. 1
}
. 6, defined mutations which discharge method is a method, the main method for changing the data state inside
was mutations = {
incCount(){
++state.count;
}
}
7, similar advantages calculated properties, which changes state when the trigger count data inside getters method of acquiring a new value (substantially less than)
var getters= {
computedCount: (state) => {
return state.count*2
}
}
8, Action with substantially no
Action similar mutation, except that:
Action is submitted mutation, rather than directly change state.
Action can contain any asynchronous operation.
Actions = {var
incMutationsCount (context) {/ * so you can submit a call context.commit * mutation /
context.commit ( 'incCount'); / * execute mutations inside incCount method of changing the state inside the data * /
}
}
Expose
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
The formation of which use vuex:
1. The introduction of store
import store from '../vuex/store.js';
2, registration
default {Export
Data () {
return {
MSG: 'I'm a home component',
VALUE1: null,
}
},
Store,
Methods: {
incCount () {
. store.commit the this $ ( 'incCount'); / * Trigger which state data * /
}
}
}
3, which acquires state data
this. $ store.state. Data
4, trigger mutations change the state of the data inside
this $ store.commit ( 'incCount') .;
5, which triggers actions method
. This $ store.dispatch ( 'incCount' );
6, {{this. $ Store.getters.computedCount}} The method returns to obtain data which is getters