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

Question

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;

So like, you're just setting a default value if your Vuex store is not set, right? I think you'd just need to define your vuex state with these default values, instead of empty strings etc (But maybe you don't want that). Also, if you want your component to get data from the vuex store, there's no need to link a data to the vuex, just use the $store.getters.settings from anywhere in your component :) — Kapcash
– Kapcash, Commented Feb 8, 2022 at 14:22
@kapcash Yeah exactly. If there is no data in the Vuex store I set default value. "define your vuex state with these default values" what do you mean with this? "Also, if you want your component to get data from the vuex store, there's no need to link a data to the vuex, just use the $store.getters.settings from anywhere in your component" so I don't set it in data but use it directly in the component? — Kuubs
– Kuubs, Commented Feb 8, 2022 at 14:29
Could you share your vuex code? So I can see what's within the getters you use? — Kapcash
– Kapcash, Commented Feb 8, 2022 at 14:50

Kapcash · Accepted Answer · 2022-02-09 15:14:54Z

1

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 Feb 9, 2022 at 15:14

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kuubs Over a year ago

Thanks for the extensive reply, really helpful. I had a gut feeling I was doing things wrong, and you are totally right I should set the default states in Vuex. Thanks again. Will update my code with your advice. Thank you!

Kuubs Over a year ago

I just rewrote my whole application using the direct Vuex state, instead of copying everything over. Works flawlessly. Thanks for the explanation!

Kuubs Over a year ago

I got some issues, would you like to review all my code to see where it goes wrong? The application is pretty small, but it seems to me that setting everything to the global $store is not working well...

Kuubs Over a year ago

Ah reading the docs I probably need to make a computed object of the settings object from the store and use that in my v-model, i will tinker away a bit more, and if i get stuck i ask again

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related