Vuex implementar o gerenciamento de estado
Antecedentes: gerenciamento de estado Vue
Como introduzir VUEX
1. Crie um novo index.js arquivo usado para diretamente VUEX referência
import Vue from 'vue'
import Vuex from 'vuex'
//直接使用VUEX
Vue.use(Vuex)
//创建vuex实例
const store = new Vuex.store({
})
export default store
2. Introdução dos main.js loja 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/>'
})
-
declaração de Estado e de uso
const store = new Vuex.store({ state:{ count:1 } }) <h1> {{this.$store.state.count}} </h1>
-
getters
const store = new Vuex.store({ state:{ count:1 }, getters:{ getStateCount:function(state){ return state.count + 1 } } }) <h1> {{this.$store.getStateCount}} </h1>
Como o gerenciamento de estado (dados de alteração)
-
Disposição segue
<p>{{this.$store.count}} </p> <button @click="add">ADD</button> <button @click="minus">MINUS</button>
-
Correspondente disposição lógica
methods:{ add:function(){ this.$store.commit("add") }, minus:function(){ this.$store.commit("minus") } }
-
Em armazenar objetos 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 } } })
gerenciamento de estado Como elegante
-
Use ações
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. Se não o fizermos como o uso de "presente na página. Store.dispatch ( 'funname') "tal escrita longa, então podemos utilizar mapState, mapGetters, mapActions não vai ser muito problema;
<p>{{count1}} </p>
import {mapState,mapGetters,mapActions}from 'vuex'
couputed:{
mapSate{
count1:state=>store.count
}
}