JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vuex.js'></script>

<div id='app'>
  <string-cmp></string-cmp>
  <string-reverse-cmp></string-reverse-cmp>
  <string-form-cmp></string-form-cmp>
</div>

JavaScript

const store = new Vuex.Store({
  state: {
    string: 'Hello World'
  }
});

const StringCmp = {
  template: '<h3>{{string}}</h3>',
  computed: {
    string () {
      return this.$store.state.string;;
    }
  }
};

const StringReverseCmp = {
  template: '<h3>{{string}}</h3>',
  computed: {
    string () {
      return this.$store.state.string.split('').reverse().join('');
    }
  }
};
const StringFormCmp = {
  template: '<input v-model="string"/>',
  computed: {
    string: {
      get () {
        return this.$store.state.string;
      },
      set (val) {
        this.$store.state.string = val;
      }
    }
  }
};

new Vue({
  el: '#app',
  store,
  components: {
    stringCmp: StringCmp,
    stringReverseCmp: StringReverseCmp,
    StringFormCmp
  }
});