base Vue de vuex gerenciamento de estado

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/>'
    
    
})
  1. declaração de Estado e de uso

     const store = new Vuex.store({
         state:{
             count:1
         }
     })
     
     
     <h1> {{this.$store.state.count}} </h1>
    
  2. 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)

  1. Disposição segue

     <p>{{this.$store.count}} </p>
     <button @click="add">ADD</button>
     <button @click="minus">MINUS</button>
    
  2. Correspondente disposição lógica

     methods:{
         add:function(){
             this.$store.commit("add")
         },
         minus:function(){
             this.$store.commit("minus")
         }
     }
    
  3. 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

  1. 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. s t r o e . s t a t e . c o u n t t h i s . stroe.state.count”和“isso. 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
    }
}
Publicado 98 artigos originais · ganhou elogios 6 · vê 20000 +

Acho que você gosta

Origin blog.csdn.net/dirksmaller/article/details/103789740
Recomendado
Clasificación