Vuex se ha desarrollado especialmente para una gestión de estado de la aplicación Vue.js

Vuex se ha desarrollado especialmente para una gestión de estado de la aplicación Vue.js

Bueno, aquí vamos, si no entiende sobre esto, por favor haga clic aquí https://vuex.vuejs.org/zh/

instalar

 

NPM instalar vuex - Guardar 

hilo complemento vuex

 

 

 

 

1, Src a continuación para crear un nuevo almacén de carpetas

2, crear una nueva carpeta en la tienda index.js

Los contenidos son los siguientes:

 

 

 3, index.js sigue

 

Vue de importación 'Vue' 
Importar de Vuex 'vuex' 
Vue.use (Vuex) 
// crear objetos VueX 
const = tienda de nueva nueva Vuex.Store ({ 
  Estado: { 
    nombre: 'lápices de colores de hadas' 
  }, 
  // se calcula a la tienda de propiedad 
  captadores: { 
    getName (Estado) { 
      retorno provincia.nombre 
    } 
  }, 
  // operación asíncrona 
  acciones: { 
    setMyName (la confirmación {,} Estado, nombre) { 
      el commit ( 'el setName' , nombre) 
    } 
  }, 
  // funcionamiento síncrono 
  / / Quiero cambiar el estado del valor de estado y sólo se puede cambiar por el método commit mutaciones. 
  mutaciones: {
    setName (estado, nombre) { 
      state.name = nombre 
    } 
  } 
}) 

de exportación por defecto tienda

 

 

 

 4, modificado para introducir store.js main.js

importación de Vue 'vue' 
importación de Aplicación './App' 
router de importación de './router'
 // 引入vuex-tienda 
tienda de importación de '@ / tienda / index' nueva Vue ({ 
  EL: '#app' , 
  tienda , 
  enrutador, 
  componentes: {app}, 
  plantilla: '<App />' 
})

 Hasta ahora hemos completado la introducción de VUEX.

 Aquí comenzamos a explicar un ejemplo, modificamos directamente los componentes HelloWorld.vue siguiente código es el siguiente

<Plantilla> 
  <div class = "Hola"> 
    {{getNombre}}
     <tipo botón = "Botón" @ Click = "la setName"> Haga clic en Cambiar </ botón> 
    <Router-Link: a = "{nombre: 'MyStore' } "> Haga clic para saltar a otra página </ Router-Link> 
  </ div> 
</ Plantilla> 

<script> 

exportación predeterminado { 
  nombre: 'el HelloWorld' , 

  de datos () { 
    retorno {} 
  }, 
  Métodos: { 
    la setName (nombre ) { 
      // el presente. store.commit $ ( 'el setName', 'Página de cerdo') 
      al este . store.dispatch $ ( 'setMyName', 'Página de cerdo' ) 
    } 
  },
  calculado: { 
    getName () { 
      volver  este. $ store.getters.getName 
    } 
  } 
}
 </ script>

 

A continuación, los siguientes componentes myStore.vue un nuevo componente,

<template> 
    <div class = "miAlmacén"> 
      {{}} $ store.state.name
     </ div> 
</ template> 

<script> 

de exportación por defecto { 

}
 </ script>

 

Src y dispuesto por debajo de router.js

importación de Vue 'vue' 
importación del router 'vue-enrutador 

Vue.use (router) 

de exportación por defecto  nuevo Router ({ 
  rutas: [ 
    { 
      ruta: '/' , 
      nombre: 'Hola Mundo' , 
      componente: () => importación ( '@ / componentes / HelloWorld' ) 
    }, 
    { 
      path: '/ miAlmacén' , 
      nombre: 'MyStore' , 
      componente: () => import ( '@ / componentes / miAlmacén' ) 
    } 
  ] 
})

 

Ahora empezamos la mirada.

 

Aceptar alcanzó las expectativas.

resumen:

La diferencia entre este. Store.dispatch $ () con este. Store.commit $ () método

cometer: la sincronización
de almacenamiento

esta . store.commit $ ( 'CambiarValor', nombre)

el valor

 

esta . $ store.state.changeValue

 

 despacho: operación asíncrona

 memoria

esta . store.dispatch $ ( 'getLists', nombre)

el valor

esta . $ store.getters.getLists

 

 Todas las manos para luchar contra el artículo original, si hay algo mal Paizhuan bienvenida a dame un comentario más abajo.