On gists

Simple global state hook aka composable

Vue.js

state.js Raw #

import { ref, readonly } from 'vue';

const sharedVar = ref(false);

const toggleOutside = () => {
  sharedVar.value = !sharedVar.value;
};

export const useTestState = () => {
  const toggleInside = () => {
    sharedVar.value = !sharedVar.value;
  };

  return {
    sharedVar: readonly(sharedVar),
    toggleOutside,
    toggleInside,
  };
};

A.vue Raw #

<template>
  <div>A</div>
  <div>sharedVar: {{ sharedVar }}</div>
  <button @click="toggleOutside">toggle outside</button>
  <button @click="toggleInside">toggle inside</button>
</template>

<script>
import { useTestState } from '../state';
export default {
  name: 'A',
  setup() {
    const { sharedVar, toggleOutside, toggleInside } = useTestState();

    return {
      sharedVar,
      toggleOutside,
      toggleInside,
    };
  },
};
</script>


<!-- nebo vyvoláme metody driv  za prepokladu ze state.js nebude sharedVar readonly -->

<template>
  <div>A</div>
  <div>sharedVar: {{ sharedVar }}</div>
  <button @click="toggleOutside">toggle outside</button>
  <button @click="toggleInside">toggle inside</button>
  <button @click="x">x</button>
</template>

<script>
import { useTestState } from '../state';
const { sharedVar, toggleOutside, toggleInside } = useTestState();
export default {
  name: 'A',
  setup() {
    return {
      sharedVar,
      toggleOutside,
      toggleInside,
    };
  },
  methods: {
    x() {
      sharedVar.value = !sharedVar.value;
    },
  },
};
</script>

B.vue Raw #

<template>
  <div>B</div>
  <div>sharedVar: {{ sharedVar }}</div>
  <button @click="toggleOutside">toggle outside</button>
  <button @click="toggleInside">toggle inside</button>
</template>

<script>
import { useTestState } from '../state';
export default {
  name: 'B',
  setup() {
    const { sharedVar, toggleOutside, toggleInside } = useTestState();

    return {
      sharedVar,
      toggleOutside,
      toggleInside,
    };
  },
};
</script>

demo.txt Raw #

https://stackblitz.com/edit/vue-uh1crz?file=src%2FApp.vue,src%2Fcomponents%2FA.vue,src%2Fcomponents%2FB.vue,src%2Fstate.js