Question

我是VueJS的新手，并且正在创建一个VueJS应用程序，您可以在其中获取有关Github用户的一些信息，（例如：https://api.github.com/users/versifiction）

我使用VueX创建了一个商店，但是我需要更新用户在输入中写入的值，我的“ inputValue”始终为“”（其默认值），当我在输入中键入内容时，存储值仍为“”

我尝试过这个： Input.vue

<template>
  <div class="input">
    <input
      type="text"
      :placeholder="placeholder"
      v-model="inputValue"
      @change="setInputValue(inputValue)"
      @keyup.enter="getResult(inputValue)"
    />
    <input type="submit" @click="getResult(inputValue)" />
  </div>
</template>

<script>
import store from "../store";

export default {
  name: "Input",
  props: {
    placeholder: String,
  },
  computed: {
    inputValue: () => store.state.inputValue,
  },
  methods: {
    setInputValue: (payload) => {
      store.commit("setInputValue", payload);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

这： store / index.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    inputValue: "",
  },
  getters: {
    getInputValue(state) {
      return state.inputValue;
    }
  },
  mutations: {
    setInputValue(state, payload) {
      console.log("setInputValue");
      console.log("payload ", payload);
      state.inputValue = payload;
    },
  },
});

Answer 1

根据form handling部分中的vuex文档，您应该执行以下操作：

  :value="inputValue"
      @change="setInputValue"

和

 methods: {
    setInputValue: (event) => {
      store.commit("setInputValue", event.target.value);
    }
  }

Answer 2

绑定vuex和组件的最简单，最优雅的方法是使用计算属性。上面的代码将变成

 <input
      type="text"
      :placeholder="placeholder"
      v-model="inputValue"
      @keyup.enter="getResult(inputValue)"
    />

在计算的属性内，您需要用以下代码替换inputValue。

computed: {
    inputValue: {
      set(val){
        this.$store.commit(‘mutationName’, val)
      },
      get() {
        return this.$store.stateName
      }
    }
}

将VueX存储状态值绑定到输入（VueJS）

2 个答案: