====== Короткая книжка по Vue ======

===== Жизненный цикл Vue приложения =====
{{:works:programmer:js:vue-lifecycle.png?400|}}


===== Занимался фигнёй при переходе с v2 на v3 =====
<code html>
<div class="container">
  <h1>Program main</h1>
  <h2>Test text and component</h2>
  <p v-text="name"></p>
  <div class="btn-group">
    <button-counter v-for="n in 3" :key="n"></button-counter>
  </div>

  <h2>Vuex.store</h2>
  <pre v-text="$store.state">...</pre>
  
  <p>Name: <span v-text="nameDyn">Guest</span></p>
  
  <div class="btn-group">
    <button class="btn btn-info" v-on:click="$store.commit('increment')">Store Inc</button>
    <button class="btn btn-info" v-on:click="$store.dispatch('act384', {login: 'LatDEV'})">Get User</button>

    <button class="btn btn-warning" @click="$store.state.count += 1" v-example="baz">Dont do that!</button>
  </div>
</div>
</code>

<code javascript>
function TestFiter(vue, options) {
  vue.config.globalProperties.$filters = vue.config.globalProperties.$filters || {};
  vue.config.globalProperties.$filters.capitalize = function(value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

function TestDirective(vue, options) {
  vue.directive('example', {
    // called before bound element's attributes or event listeners are applied
    created(el, binding, vnode, prevVnode) {
      //console.log(el, binding, vnode, prevVnode);
      el.setAttribute('disabled', 'disabled');
    },
    // called right before the element is inserted into the DOM.
    beforeMount() {},
    // called when the bound element's parent component and all its children are mounted.
    mounted() {},
    // called before the parent component is updated
    beforeUpdate() {},
    // called after the parent component and all of its children have updated
    updated() {},
    // called before the parent component is unmounted
    beforeUnmount() {},
    // called when the parent component is unmounted
    unmounted() {}
  });
}

function ButonCounter(vue, options) {
  vue.component('button-counter', {
    props: {
      onClick: {
        type: Function,
        default() {}
      }
    },
    data() {
      return {
        clicks: 0,
      }
    },
    template: `<button class="btn btn-secondary" v-on:click="onButttonClick">Hello {{clicks}}</button>`,
    methods: {
      onButttonClick($event) {
        this.clicks += 1;
        this.$emit('onClick', this.clicks);
      }
    },
  });
}

const App = {
  data() {
    return {
      name: "Test",
    }
  },
  computed: {
    theState() {
      return this.$store.state;
    },
    nameDyn() {
      return this.$filters.capitalize(this.$store?.state?.user?.login || "Гость");
    }
  }
};

const GET_USER = "act384";

const store = Vuex.createStore({
  state: () => ({
    count: 1,
    user: null
  }),
  mutations: {
    increment (state) {
      state.count++
    },
    user(state, user) {
      state.user = user
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    },
    [GET_USER](context, {login}) {
      fetch(`https://api.github.com/users/${login}`)
        .then(response => response.json())
        .then(response => {
          context.commit('user', response);
        })
        .catch(err => {
          context.commit('user', null);
        })
    },
  }
});

async function main() {
  const inst = Vue.createApp(App);
  inst.use(store);
  inst.use(ButonCounter);
  inst.use(TestDirective);
  inst.use(TestFiter);
  inst.mount(".container");
}

main().catch(console.error);
</code>

CDNS
  * https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js
  * https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js