使用 Vuex 存储模块为输入字段设置值答案

【问题标题】：Setting value to input field using Vuex store modules使用 Vuex 存储模块为输入字段设置值
【发布时间】：2019-05-29 20:34:53
【问题描述】：

我有一个模块模式的 vuex 来获取用户的数据：

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;
  }
};

然后在我的模板 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);
  }
}

现在我检查我有对象 getUser 的吸气剂，我可以看到该属性。如何将 vuex getter 中的 name 值分配给输入字段？

【问题讨论】：

标签： vue.js nuxt.js vuex-modules

【解决方案1】：

虽然 Jacob 的回答不一定不正确，但最好使用计算属性。你可以阅读here

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

然后通过{{user.name}}访问name或者创建一个name计算属性

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

编辑：以小提琴为例 https://jsfiddle.net/uy47cdnw/

Edit2：请注意，如果您想通过该输入字段改变对象，您应该使用 Jacob 提供的链接。

【讨论】：

在某些情况下，您会非常正确。我只是不认为这里是这种情况。 v-model="name" 在没有 setter 的情况下与计算属性结合会出现问题。（上帝......我对不合理的投票感到冒犯）
最初我的方法是使用计算属性，但我需要使用输入字段来改变对象，然后我的表单中有 10 个字段，所以我发现计算属性真的很乏味。还有一个实例我使用计算属性来设置状态，当我刷新页面时，值突然消失了。

【解决方案2】：

watcher 可能是你需要的

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

【讨论】：

很高兴我成功了。谢谢 Jacob，我应该在哪个生命周期中调用调度？现在我从 beforeCreate() 调用它
对此没有硬性规定。通常我在created 做。 forum.vuejs.org/t/…
我认为这个用例需要计算属性而不是观察者
@AllenChun 我认为这就是弗兰克的意思。不确定它是否是您想要的。 vuex.vuejs.org/guide/forms.html#two-way-computed-property
@JacobGoh 请检查我的回答。无论您是否想要双向绑定，都应该使用计算属性而不是 watcher。