Of Horses! A lot of attention - more valuable advice Thank you ~
vuex understand
Centralized storage management. The status of management components, and to customize the rules to observe real-time monitoring is worth the change.
State mode management understanding
| Attributes | understanding |
|---|---|
| state | Data source drive applications |
| view | Declaratively, the state maps to view |
| actions | In response to the user view (view) results in a change of input state. |
new Vue({
// state 驱动应用的数据源
data(){
return {
count:0
}
},
// view 以声明的方式，将 state 映射到视图
template: `<div> {{ count }} </div>`,
// actions 响应在 view（视图）上的用户输入导致的状态变化。
methods: {
add(){
this.count ++
}
}
})vuex install introduced
Need to be downloaded before use vuex
npm install vuex --saveWe introduced into the main.js document file, the file is added in the inside import store from './store' ;, then introduced into the instance of the global object store VUE;
import Vue from 'vue'
import App from './App'
import router from 'router'
import store from './stroe'
Vue.config.productionTip = false;
new Vue({
el:'#app',
store,
router,
componment:{ App },
template:'<App/>
})Then create a store directory under src directory, create index.js write the following code under the store directory
import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
})
export default store;//导出store1.vuex four core properties
- state: Data Source
We need to save the data defined and stored here, you can get the data through this. $ Store.state in the assembly
First index.js write the following code in the store directory
import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state:{
count:1, //定义数据源
}
})
export default store;//导出storeThen we can use any of the components in this. $ Store.state method to get our data count
<template>
<div>
{{ this.$store.state.count }} //1.页面调用
{{ msg }} //2.方法赋值
</div>
</template>
<script>
export default {
name : 'home',
data () {
return {
msg : null
}
},
mounted(){
this.msg = this.$store.state.count;
}
}
<script/>- getters: Computed Property
getters equivalent vue computed in the calculation properties, getters return value will be based on its dependencies are cached, and will only be recalculated when his dependence value changes, where we can monitor the value of the state by defining getters change, returns the results.
First index.js write the following code in the store directory
import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state:{
count:1, //定义数据源
},
getters:{
getStateCount: state => state.count+1 //观测
},
})
export default store;//导出storeGet in Components page
<template>
<div>
{{ this.$store.state.count }} // count 值：1
{{ this.$store.getters.getStateCount }} //调用getters 值：2
</div>
</template>- mutations: Event Handler
We are in the data page to get, but if we need to modify the count value of how to do? If you need to change only the value of the method is to submit mutation in store to modify.
Examples of simple events, or in the store / index.js
import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state:{
count:1, //定义数据源
},
getters:{
getStateCount: state => state.count+1 //观测
},
mutations:{
add:state => state.count++,
red:state => state.count--
}
})
export default store;//导出storeComponents used in this. $ Store.commit ( 'mutations Event Name') This method is called
<template>
<div>
<p>{{ count }}<p/>
<p>
<button @click='add'></button>
<button @click='red'></button>
</p>
</div>
</template>
<script>
export default {
name : 'home',
data () {
return {
count: 1,
}
},
computed: {
count () {
return this.$store.state.count
}
},
methods: {
add(){
this.$store.commit('add')
},
red(){
this.$store.commit('red')
},
}
</script>- actions: to the function components can be used, for driving event handlers mutations
Through the above study we learned how to modify the value of the state. However, this official is not to suggest that we go directly to modify the value inside the store, but let's go a submission actions, actions filed mutation in the state go to modify the value.
Therefore, we need to define a function mutation of actions to be submitted.
import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state:{
count:1, //定义数据源
},
getters:{
getStateCount: state => state.count+1 //观测
},
mutations:{
add:state => state.count++,
red:state => state.count--
},
actions:{
addFn(context) {
context.commit('add');
},
redFn(context) {
context.commit('red')
}
})
export default store;//导出storeThen edit the component file, although the same effect, but still have to strictly comply with the official wording.
<template>
<div>
<p>{{ count }}<p/>
<p>
<button @click='addFn'></button>
<button @click='redFn'></button>
</p>
</div>
</template>
<script>
export default {
name : 'home',
data () {
return {
count: 1,
}
},
computed: {
count () {
return this.$store.state.count
}
},
methods: {
addFn(){
this.$store.dispatch('addFn')
},
redFn(){
this.$store.dispatch('redFn')
},
}
</script>
- vuex there is a property modules: modular data storage (not required)
2.vuex expand
- mapState
- mapGetters
- mapActions
In our development process frequently invoked in the methods and data store, this time using this. $ Store.state and other wording will look very bloated, introduced mapState, mapGetters, mapActions all here.
In introducing the components we need to use vuex in state management.
import { mapState、mapGetters、mapActions } from 'vuex';
.
.
.
computed:{
...mapState({
count : state => state.count
})
}In this case we use the same page count calls effect.