vue-cheat-sheet-spanish.md

VUE

Mas usado: props, data, computed. methods, mounted

Components:

componentes que tenga dentro. (para no escribir c/u ver https://youtu.be/7YZ5DwlLSt8?t=1273)

Props

Data

Computed

datos calculados. (es como un data, pero cachea si puede) para usar store:

computed: {
  ...mapState( [ 'laHora' ] )
}

Mounted

cuando es visible en el dom

Methods

para usar store:

methods: {
  ...mapActions( [ 'actualizaHora' ] )
}

STORE (VUEX)

State

Getters

son computers del store

doneTodos: state => {
  return state.todos.filter(todo => todo.done)
}

Actions

llama a la mutation

increment (context) {
  context.commit('increment')
}

Mutations

son como events (setters)

increment (state, n) {
  state.count += n
}

vue-luco.md

Basic component

<script>
  import { defineComponent, ref, computed, reactive } from 'vue';

  export default defineComponent({
      components: { LineChart, FilterRange, FilterCoin },
      props: {
          prices: Array,
      },
      setup(props) {
          const state = reactive({
              currentRange: '1y',
          });

          const chartData = computed(() => ({
              labels: props.time
          })); // props lo pasa Inertia.

          function updateChart() {
              Inertia.post('/coin/' + state.currentCoin, {'range': state.currentRange})
          }
          return { state, chartData, updateChart };
      },
  });
</script>

Emit

$emit -> Filter.vue

<a @click="$emit('changeCoin', value)"></a>

@event -> Welcome.vue

`<Filter @changeCoin="changeCoin($event)" />`

Pasar Props

<LineChart :chartData="chartData" />

Leer Props (template)

<template>
  <input :checked="currentValue.indexOf(value) != -1" />
</template>

export default defineComponent({
    props: {
        currentValue: Array
    },
    setup() {
        return {}
    },
})