Vuex poner en práctica la gestión estatal
Antecedentes: la administración del estado Vue
Cómo introducir VUEX
1. Cree un nuevo archivo utilizado para index.js directamente VUEX referencia
import Vue from 'vue'
import Vuex from 'vuex'
//直接使用VUEX
Vue.use(Vuex)
//创建vuex实例
const store = new Vuex.store({
})
export default store
2. Introducción de los main.js tienda de objetos
import Vue from 'vue'
import App from 'App'
import router from './router'
import store from './store'
new Vuew({
el:'#app',
store,
router,
components:{
App
}
templete:'<App/>'
})
-
declaración de estado y el uso
const store = new Vuex.store({ state:{ count:1 } }) <h1> {{this.$store.state.count}} </h1>
-
captadores
const store = new Vuex.store({ state:{ count:1 }, getters:{ getStateCount:function(state){ return state.count + 1 } } }) <h1> {{this.$store.getStateCount}} </h1>
¿Cómo la administración del estado (datos de cambio)
-
Disposición sigue
<p>{{this.$store.count}} </p> <button @click="add">ADD</button> <button @click="minus">MINUS</button>
-
Correspondiente disposición lógica
methods:{ add:function(){ this.$store.commit("add") }, minus:function(){ this.$store.commit("minus") } }
-
En los objetos de almacén vuex
const store = new Vuex.store({ state:{ count:1 }, getters:{ getStateCount:function(state){ return this.$store.state + 1 } }, mutations:{ add:function(state){ state.count = state.count + 1 }, minus:function(){ state.count = state.count + 1 } } })
Qué elegante administración del estado
-
Use acciones
methods{ add:function(){ this.$store.dispatch("addF") }, minus:function(){ var n = 1; this.$store.dispatch("minusF" ,n) } } const store = new Vuex.store({ state:{ count:1 }, getters:{ getStateCount:function(state){ return state + 1 } }, mutations:{ add:function(state){ state.count = state.count + 1 }, minus:function(state,n){ state.count = (state.count -1)*(n+1) } }, actions:{ addF:function(context){ context.commit("add") }, minusF:function(context,n){ context.commit("minus",n) } } })
2. Si no lo hacemos como el uso de "esto en la página. Store.dispatch ( 'funname') "tal escritura de largo, entonces podemos utilizar mapState, mapGetters, mapActions no va a ser demasiado problema;
<p>{{count1}} </p>
import {mapState,mapGetters,mapActions}from 'vuex'
couputed:{
mapSate{
count1:state=>store.count
}
}