Vuex

by gocode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/0.8.2/vuex.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <button type="text" @click="showBox">Show Box</button>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

JavaScript

// component with value from the store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count
  }
})
Vue.component('myCmp', {
  template: '<div>{{counter}}</div>',
  computed: {
    counter() {
      return this.$store.getters.count;
    }
  }
})
const myCmp = Vue.component('myCmp');


const vm = new Vue({
  el: '#app',
  data() {
    return {
    	key: 1
    }
  },
  methods: {
    showBox() {
      const h = this.$createElement;
      this.$msgbox({
        title: 'EUI',
        message: h(myCmp, {key: this.key++})
/*         message: h('p', null, [
            h('span', null, 'Message can be '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]) */
      })
    }
  },
  store
})