Vue.js best practices in data settings, using data method to set data dynamically

Issue

I have created an app, which works pretty good but I am (I think) doing stuff on places where it's not the best practice to do. I have a component and I use this piece of code for my data method:

    data() {
    
        var versionThing = "v1";
        if(this.$store.getters.version !=''){
            versionThing = this.$store.getters.version;
        } 
    
        var settings = this.$store.getters.settings;
    
        var checkboxesThing = [
                    { val: "val1", text:"Text 1", isChecked: false },
                    { val: "val2", text:"Text 2", isChecked: false },
                    { val: "val3", text:"Text 3", isChecked: false },
                ];
        if(settings.checkboxes != ''){
            checkboxesThing = settings.checkboxes;
        }
        return {
    
            settings: {
                key: settings.key,
                version: versionThing,
                checkboxes: checkboxesThing,
            }
            
        };
    },

This way I check whether or not there is a input in my VueX store. But i have a feeling this is probably not the way to do it properly...

This is my VueX code index.js file:

    import { createStore } from 'vuex';
    import { Storage } from '@ionic/storage';
    
    const ionicStorage = new Storage();
    ionicStorage.create();
    
    const store = createStore({
    
        state() {
            return {
                settings:{
                    key:"",
                    version:'',
                    checkboxes:"",
    
                },
            }
    
        },
        getters: {
            key(state){
                return state.settings.key;
            },
    
            version(state){
                return state.settings.version;
            },
    
            settings(state){
                return state.settings;
            },
    
            // Ionic/Storage getters
            async getStorageAandoening(state){
                const myAwesomeValue = await ionicStorage.get('key')
                if(myAwesomeValue != ''){
                    state.settings.key = myAwesomeValue;
                }
                return state.settings.key;
            },
    
            async getStorageSettings(state){
                const myAwesomeValue = await ionicStorage.get('settings');
                var objectMyAwesomeValue = JSON.parse(myAwesomeValue);
                if(objectMyAwesomeValue.key != ''){
                    state.settings = objectMyAwesomeValue;
                }
                return state.settings;
            }
        },
        mutations: {
            changeKey (state, payload) {
                ionicStorage.set('key', payload)
                state.settings.key = payload
            },
            changeVersion(state, payload){
                ionicStorage.set('version', payload)
                state.settings.version = payload
            },
            changeSettings(state,payload){
                ionicStorage.set('settings', JSON.stringify(payload));
                state.settings = payload;
            }
        },
        actions: {}
    }    
    );
    
    export default store;

Solution

First thing, the vuex modules state is usually filled with the default state you expect.

state() {
  return {
    settings:{
      key: "",
      version: "v1",
      checkboxes: [
        { val: "val1", text:"Text 1", isChecked: false },
        { val: "val2", text:"Text 2", isChecked: false },
        { val: "val3", text:"Text 3", isChecked: false },
      ],
    },
  }
},

But that's up to you, you can leave it empty if you need.

---

Then, most of your getters are not useful. Getters should be used just like "computed" in vue component: it's a derived value from your state, not shortcuts. I mean, it can be done but it's a bad practise in my opinion.

If you need to access your vuex state, just do this.$store.state.settings.

---

Finally, from your component point of vue, you may skip the step where you copy your vuex store into component data. Vuex should be the source of truth for your data, so copying them just make it useless since you could update that data in the component without notifying the vuex store (it can be useful sometimes, but I feel that it's not your case here)

<template>
  <div>{{ $store.state.settings.version }}</div>
</template>

<script>
export default {
  computeds: {
    isLastVersion() {
        return this.$store.state.settings.version === 'v2'
    },
  }
}
</script>

That's how I'd do it for your case, even though I don't have the global picture.

---

If really you need your vuex store to be empty, and your component only needs to set default values to this state, you can do it like so:

export default {
  computeds: {
    settings() {
        const storeSettings = this.$store.state.settings
        const defaultSettings = { version: 'v1', checkboxes: [...] }

        return {
          version: storeSettings.version || defaultSettings.version,
          checkboxes: storeSettings.checkboxes || defaultSettings.checkboxes,
        }
    },
  }
}

Declare a computed that reacts on your state changes. If the state is empty, you return default values. If the state is updated, then the computed updates too and return the store values.

Answered By - Kapcash