How to set initial values for data from vuex?

Question

My goal is to create an 'edit account' form such that a user can modify their account data. I want to present the account data in a form that is already filled with the users data i.e username, email, address ...

The user can then modify the data in the form and submit this form that will update their user information.

I am using v-model to bind the form input to an object called accountInfo in my data, that looks like this:

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

And here is an example of a form input in my template:

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

The values for the key's in the object are currently empty strings but I would like the values to come from an object called userProfile that is a state property in vuex.

In my 'edit account' component I am mapping the vuex state by importing:

import { mapState } from "vuex";

then using the following in a computed property

computed: {
    ...mapState(["userProfile"])
}

What I would like to do is instead of having empty strings as the values of accountInfo, assign them values from the userProfile computed property mapped from vuex, like so:

data() {
        return {
            accountInfo: {
                    firstName: this.userProfile.fristName,
            }
        }
    }

This will provide the desired initial data for my form but unfortunately this doesn't work, presumably because data is rendered earlier on in the life cycle than computed properties.

Full code:

EditAccount.vue

<template>
    <div class="container-fluid">
        <form id="sign_up_form" @submit.prevent>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";

export default {
  name: "EditAccount",
  computed: {
    ...mapState(["userProfile"])
  },
  data() {
    return {
      accountInfo: {
        firstName: this.userProfile.firstName
      }
    };
  }
};
</script>

store.js:

export const store = new Vuex.Store({
    state: {
        userProfile: {firstName: "Oamar", lastName: "Kanji"}
    }
});

Emile Bergeron that seems like the correct way to access the computed property (using this) but it still does not show in my form, presumably because the computed property is rendered after data in the vue life cycle..? — Oamar Kanji
– Oamar Kanji, Commented Jun 27, 2018 at 13:13
Are you passing the store to the root Vue instance? See the shopping cart example — Emile Bergeron
– Emile Bergeron, Commented Jun 27, 2018 at 13:44
You're right, computed are evaluated after the initial data function is called. The parent component of your form component should use the store to pass down the initial userProfile data in a prop instead. — Emile Bergeron
– Emile Bergeron, Commented Jun 27, 2018 at 14:08
$store should be ready before data function is called. Therefore, firstName: this.$store.state.userProfile.firstName should just work — Jacob Goh
– Jacob Goh, Commented Jun 27, 2018 at 14:14

Emile Bergeron · Accepted Answer · 2020-04-20 22:29:19Z

29

You were right, computeds are evaluated after the initial data function is called.

Quick fix

In the comments, @Jacob Goh mentioned the following:

$store should be ready before data function is called. Therefore, firstName: this.$store.state.userProfile.firstName should just work.

export default {
  name: 'EditAccount',
  data() {
    return {
      accountInfo: {
        firstName: this.$store.state.userProfile.firstName
      }
    }
  }
};

Really need computeds?

See @bottomsnap's answer, where setting the initial value can be done in the mounted lifecycle hook.

With your code, it would look like this:

import { mapState } from 'vuex';

export default {
  name: 'EditAccount',
  computed: {
    ...mapState(['userProfile'])
  },
  data() {
    return {
      accountInfo: {
        firstName: ''
      }
    }
  }
  mounted() {
    this.accountInfo.firstName = this.userProfile.firstName;
  }
};

Though it may render once without the value, and re-render after being mounted.

Container versus presentation

I explain Vue's communication channels in another answer, but here's a simple example of what you could do.

Treat the Form component as presentation logic, so it doesn't need to know about the store, instead receiving the profile data as a prop.

export default {
    props: {
        profile: {
            type: Object,
        },
    },
    data() {
        return {
            accountInfo: {
                firstName: this.profile.firstName
            }
        };
    }
}

Then, let the parent handle the business logic, so fetching the information from the store, triggering the actions, etc.

<template>
    <EditAccount :profile="userProfile" :submit="saveUserProfile"/>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
    components: { EditAccount },
    computed: mapState(['userProfile']),
    methods: mapActions(['saveUserProfile'])
}
</script>

While Jacob is not wrong saying that the store is ready, and that this.$store.state.userProfile.firstName will work, I feel this is more a patch around a design problem that can easily be solved with the solution above.

edited Apr 20, 2020 at 22:29

answered Jun 27, 2018 at 14:16

Emile Bergeron

17.5k5 gold badges85 silver badges133 bronze badges

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

2 Comments

Augustin Riedinger Over a year ago

Any chance to access the computed method through this object to remain DRY? Like data() { return {accountInfo: {firstName: this.options.computed.userProfile() }}} or something?

Emile Bergeron Over a year ago

@AugustinRiedinger, computed values are evaluated after the data function is called, so it's not really possible to do what you're suggesting. Though nothing stops you from extracting the logic into a stand-alone function and use it twice, once in the computed and once to initialize the state data. That said, it sounds like a bad design issue.

Lukasz Dynowski · Accepted Answer · 2019-07-15 12:32:19Z

11

Bind your input with v-model as you were:

<div id="app">
    <input type="text" v-model="firstName">
</div>

Use the mounted lifecycle hook to set the initial value:

import Vue from 'vue';
import { mapGetters } from 'vuex';

new Vue({
      el: "#app",
      data: {
        firstName: null
      },
      computed: {
        ...mapGetters(["getFirstName"])
      },
      mounted() {
        this.firstName = this.getFirstName
      }
    })

edited Jul 15, 2019 at 12:32

Lukasz Dynowski

14k14 gold badges99 silver badges149 bronze badges

answered Mar 1, 2019 at 14:19

bottomsnap

2212 silver badges5 bronze badges

1 Comment

Keerthi Kumar P Over a year ago

I think it would be better to set the initial value in created hook. We would have the computed value but the component would not have rendered, which is a perfect place to update the data values

Collectives™ on Stack Overflow

How to set initial values for data from vuex?

2 Answers 2

Quick fix

Really need computeds?

Container versus presentation

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Quick fix

Really need computeds?

Container versus presentation

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related