Setting value to input field using Vuex store modules

Question

I have a vuex in module mode that fetching the data of a user:

store/modules/users.js

import axios from "axios";

export const state = () => ({
  user: {}
});

// Sets the values of data in states
export const mutations = {
  SET_USER(state, user) {
    state.user = user;
  }
};

export const actions = {
  fetchUser({ commit }, id) {
    console.log(`Fetching User with ID: ${id}`);
    return axios.get(`${process.env.BASE_URL}/users/${id}`)
      .then(response => {
        commit("SET_USER", response.data.data.result);
      })
      .catch(err => {
        console.log(err);
      });
  }
};

// retrieves the data from the state
export const getters = {
  getUser(state) {
    return state.user;
  }
};

then on my template pages/users/_id/index.vue

<b-form-input v-model="name" type="text"></b-form-input>

export default {
  data() {
    return {
      name: ""
    }
  },
  created() {
    // fetch user from API
    this.$store.dispatch("fetchUser", this.$route.params.id);
  }
}

Now I check the getters I have object getUser and I can see the attribute. How can I assign the name value from vuex getters to the input field?

tony19 · Accepted Answer · 2022-07-15 23:06:33Z

2

watcher is probably what you need

export default {
  // ...
  watch: {
    '$store.getters.getUser'(user) {
      this.name = user.name;
    },
  },
}

edited Jul 15, 2022 at 23:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 3, 2019 at 9:23

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

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

5 Comments

AllenC Over a year ago

Nice I made it work. Thanks Jacob, in what lifecycle should I call the dispatch? Right now I'm calling it from beforeCreate()

Jacob Goh Over a year ago

There's no hard rules for this. Normally I do it in created. forum.vuejs.org/t/…

Frank Over a year ago

I think that this use case calls for a computed property instead of a watcher

Jacob Goh Over a year ago

@AllenChun i think this is what Frank means. Not sure if it is what you want though. vuex.vuejs.org/guide/forms.html#two-way-computed-property

Frank Over a year ago

@JacobGoh Please check my answer. Regardless of whether you want a two-way binding you should use a computed property over watcher.

tony19 · Accepted Answer · 2022-07-16 05:40:39Z

0

While Jacob's answer isn't necessarily incorrect, it's better practice to use a computed property instead. You can read about that here

  computed: {
    user(){
        return this.$store.getters.getUser
    }
  }

Then access name via {{user.name}} or create a name computed property

  computed: {
    name(){
        return this.$store.getters.getUser.name
    }
  }

Edit: fiddle as example https://jsfiddle.net/uy47cdnw/

Edit2: Please not that if you want to mutate object via that input field, you should use the link Jacob provided.

edited Jul 16, 2022 at 5:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 3, 2019 at 9:50

Frank

1,4142 gold badges17 silver badges35 bronze badges

2 Comments

Jacob Goh Over a year ago

in some cases, you would be very right. I just don't think this is the case here. v-model="name" combine with a computed property without setter is going to be problematic. (god... i feel offended by the unreasonable downvote )

AllenC Over a year ago

Initially my approach is using computed property but I need to mutate the object using input field, then I have 10 fields in my form so I find computed property really tedious. There's also an instance I used computed property to set the state and when I refreshed the page the value suddenly gone.

Collectives™ on Stack Overflow

Setting value to input field using Vuex store modules

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related