Установка значения в поле ввода с помощью модулей магазина Vuex - PullRequest
Новая
       20

Установка значения в поле ввода с помощью модулей магазина Vuex

0 голосов
/ 03 января 2019

У меня есть vuex в режиме модуля, который выбирает данные пользователя:

магазин / модули / 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;
  }
};

затем в моем шаблоне страниц / пользователей / _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);
  }
}

Теперь я проверяю геттеры, у меня есть объект getUser , и я вижу атрибут. Как я могу присвоить значение name из геттеров vuex полю ввода?

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Хотя ответ Джейкоба не обязательно неверен, лучше вместо этого использовать вычисляемое свойство.Вы можете прочитать об этом здесь 

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

Затем получить доступ к имени через {{user.name}} или создать вычисляемое свойство имени 

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

Редактировать: fiddle как пример https://jsfiddle.net/uy47cdnw/

Edit2: Пожалуйста, обратите внимание, что если вы хотите изменить объект через это поле ввода, вы должны использовать предоставленную Джейкобом ссылку.

0 голосов
/ 03 января 2019

наблюдатель это, вероятно, то, что вам нужно 

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