On gists

Composable - replacement for VUEX

Vue.js

example.js Raw #

// https://medium.com/js-dojo/should-you-use-composition-api-as-a-replacement-for-vuex-274356443ebc

// src/global.js
import { reactive, readonly } from "vue";
const state = reactive({
  count: 0
});
const increment = function () {
  state.count++;
}
export default { state: readonly(state), increment };

// src/main.js
import { createApp } from "vue";
import global from "@/global";
const app = createApp({
  provide: {
    global
  },
}

// someComponent.vue
<template>
  <div>{{ global.state.count }}
  <button @click="global.increment">Increment</button>
</template>
<script>
export default {
  inject: ["global"]
}
</script>