Vuex é um especialmente desenvolvido para o gerenciamento de estado do aplicativo Vue.js

Vuex é um especialmente desenvolvido para o gerenciamento de estado do aplicativo Vue.js

Bem, aqui vamos nós, se você não entender sobre isso, por favor clique aqui https://vuex.vuejs.org/zh/

instalar

 

npm instalar vuex - save 

fio add vuex

 

 

 

 

1, Src abaixo para criar um novo arquivo de pastas

2, crie uma nova pasta index.js na loja

Conteúdo são os seguintes:

 

 

 3, segue index.js

 

Vue de Importação 'VUE' 
Importar de Vuex 'vuex' 
Vue.use (Vuex) 
// criar objetos VueX 
const = loja nova nova Vuex.Store ({ 
  estaduais: { 
    nome: 'pastéis de fadas' 
  }, 
  // é calculado para loja propriedade 
  getters: { 
    getName (Estado) { 
      return state.name 
    } 
  }, 
  // operação assíncrona 
  ações: { 
    setMyName (a comprometer {,} Estado, nome) { 
      o commit ( 'o setName' , nome) 
    } 
  }, 
  // operação síncrona 
  / / deseja alterar o estado dos valores de estado, o método só pode ser modificado pelos cometem mutações.
   mutações: {
    setName (estado, nome) {
      state.name = nome 
    } 
  } 
}) 

exportação padrão loja

 

 

 

 4, modificado para introduzir store.js main.js

importação Vue de 'vue' 
importação App de './App' 
router de importação de './router'
 // 引入vuex-store 
loja de importação de '@ / store / index' novo Vue ({ 
  el: '#app' , 
  loja , 
  roteadores, 
  componentes: {app}, 
  template: '<App />' 
})

 Até agora, temos completado a introdução de VUEX.

 Aqui começamos a explicar um exemplo, nós modificar diretamente os componentes seguinte código HelloWorld.vue é a seguinte

<Modelo> 
  <div class = "Olá"> 
    {{getName}}
     <Button type = "Button" @ Click = "o setName"> Clique em Alterar </ Button> 
    <Router-Link: to = "{name: 'MyStore' } "> clique para ir para outra página </ Router-link> 
  </ div> 
</ Template> 

<script> 

Export padrão { 
  name: 'o HelloWorld' , 

  dados () { 
    return {} 
  }, 
  Métodos: { 
    a setName (nome ) { 
      // a isso. store.commit $ ( 'a setName', 'porco Página') 
      a este . store.dispatch $ ( 'setMyName', 'porco Página' ) 
    } 
  },
  calculado: { 
    getName () { 
      retornar  este. $ store.getters.getName 
    } 
  } 
}
 </ script>

 

Em seguida, os seguintes componentes myStore.vue um novo componente,

<template> 
    <div class = "MYSTORE"> 
      {{$ store.state.name}}
     </ div> 
</ template> 

<script> 

exportação padrão { 

}
 </ script>

 

Src e disposta por baixo router.js

importação Vue de 'vue' 
importação Router de 'vue-router' 

Vue.use (Router) 

de exportação padrão  novo Router ({ 
  rotas: [ 
    { 
      caminho: '/' , 
      name: 'HelloWorld' , 
      componente: () => importação ( '@ / componentes / HelloWorld' ) 
    }, 
    { 
      caminho: '/ MyStore' , 
      name: 'MyStore' , 
      componente: () => import ( '@ / componentes / MyStore' ) 
    } 
  ] 
})

 

Agora vamos começar a olhar.

 

OK atingiu as expectativas.

resumo:

A diferença entre esta. $ Store.dispatch () com este. $ Store.commit () Método

commit: sincronização
de armazenamento

este . $ store.commit ( 'ChangeValue', nome)

o valor

 

este . $ store.state.changeValue

 

 expedição: operação assíncrona

 memória

este . $ store.dispatch ( 'getLists', nome)

o valor

este . $ store.getters.getLists

 

 Todas as mãos para lutar contra o artigo original, se houver algo de errado Paizhuan bem-vindo para me dar um comentário abaixo.