Vuex

Question 1

Qué es el Ciclo de Vida?

Answer 1

Cada instancia pasa por una serie de pasos de inicialización cuando se crea; por ejemplo, necesita configurar la observación de datos, compilar la plantilla, montar la instancia en el DOM y actualizar el DOM cuando los datos cambian. En el camino, también ejecuta funciones llamadas enlaces de ciclo de vida , lo que brinda a los usuarios la oportunidad de agregar su propio código en etapas específicas

Question 2

created()

Answer 2

Se llama sincrónicamente después de que se crea la instancia. En esta etapa, la instancia ha terminado de procesar las opciones, lo que significa que se ha configurado lo siguiente:

data observation
computed properties
methods
watch/event callbacks

data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }

Question 3

Arrow Functions en Ciclo de Vida

Answer 3

Don’t use arrow functions (opens new window)on an options property or callback, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Question 4

Qué es Vuex?

Answer 4

Sirve como un almacén centralizado para todos los componentes de una aplicación, con reglas que garantizan que el estado solo se puede modificar de una manera predecible.

La idea principal es generar un estado global para que todos los componentes puedan acceder a la información, así también podemos tener mutaciones, acciones y getters.

Question 5

Gráfico de Vuex

Answer 5

https://vuex.vuejs.org/vuex.png

Question 6

Gráfico Ciclo de Vida

Answer 6

https://v3.vuejs.org/images/lifecycle.svg

Question 7

State

Answer 7

Vuex utiliza un árbol de estado único , es decir, este objeto único contiene todo el estado de su aplicación y sirve como la “fuente única de la verdad”.

state: {
contador: 100
},
Método no recomendado——————

<div>
<img></img>
<h1>Contador: {{ $store.state.contador }}</h1>
</div>

Question 8

mapState

Answer 8

mapState: Podemos mapear nuestros state para acceder su información
mapState devolverá un objeto y para juntarlo con nuestras propiedades computadas podemos utilizar el operador de propagación de javascript
 //en el store.js hay un state{contador: 50;

<div>
<img></img>
<h1>Contador: {{ contador }}</h1>
</div>

import {mapState} from ‘vuex’

export default {
  name: 'Home',
  computed: {
    ...mapState(['contador'])
  }
}

Question 9

Mutations

Answer 9

La única forma de cambiar el estado en una tienda Vuex es realizando una mutación. Las mutaciones de Vuex son muy similares a los eventos: cada mutación tiene un tipo de cadena y un controlador.

Question 10

Actions

Answer 10

Las acciones nos sirven para ejecutar una mutación ya que no se recomienda ejecutar una mutación directamente. También serán de mucha utilidad cuando hagamos llamados a nuestra api o bases de datos.

import { createStore } from ‘vuex’

export default createStore({
  state: {
    contador: 100
  },
  mutations: {
    incrementar(state) {
      state.contador = state.contador + 1
    }
  },
  actions: {
    incrementar({ commit }) {
      commit('incrementar')
    }
  },
  modules: {
  }
})