Would I lose any benefits if I switch from Vuex to custom Javascript store?

Question

I am making a game editor. All it needs is a way to save and read data from a common store, such as sprites and tool settings.

The problem is Vuex just seems really messy to me. Maybe it's because I'm not building a standard SPA which Vuex was designed for, but it just seems that every time I want to do something simple it adds 50+ lines of code in getters, actions, and mutations that would otherwise be unnecessary. On top of that, it has limitations such as not being able to modify states from getters which would be really helpful when generating unique asset IDs. I also have no need for the dynamic loading/unloading of modules.

So my question, if I replaced Vuex with an imported object like the following:

class MyStore_Class{
    constructor(){
        this.val = 0;
    }

    //other methods and stuff to manipulate data
}

let MyStore = new MyStore();

export default MyStore;

Then imported this MyStore object into the components where I needed it, would I lose anything?

I ran some simple tests and it seems like it works perfectly as a drop in replacement for Vuex, but I'm afraid there might be some kind of downside that I would notice only later down the line.

EXIT: Pretty much all data for the app is local, so the separation of actions/mutations tends to mean that the only action code I am writing is commit('doMutation', newData) over and over again

Answer 1

Your solution could be a vue observable, really easy to do and lightweight in term of architecture ;)

1. Create a store.js file in your src/root folder
2. Create the state value/s you wish to have globally
3. Create the methods you needs for his interaction
4. Set it up in your components and there you go

Setup store.js

import Vue from "vue";
const state = Vue.observable({ val: 0 });
export const increment = () => state.counter++;
export const decrement = () => state.counter--;
export default state;

In your component

<template>
  <div>
    <p>The value is {{val}}</p>
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>
<script>
  import store, { increment, decrement } from "./store";
  export default {
    computed: {
// your getter in some way
      counter() {
        return store.counter;
      }
    }, 
    methods: {
      inc() {
        increment();
      },
      dec() {
        decrement();
      }
    }
  };
</script>

I took these examples on this article, where you could read more about vue observable if you want, but i use it a lot on small projects where i need just few values accessible globally and that doesn't require a vuex architecture.

https://medium.com/better-programming/how-to-manage-vues-state-with-vue-observable-25988a88938b