javascript - Bind a VueX store state value to an input (VueJS) - Stack Overflow

admin管理员组

文章数量:1430647

I'm new with VueJS, and I'm creating a VueJS app where you can get some informations about a Github User, (example: )

I created a store with VueX, but I need to update the value written by the user in the input, My "inputValue" is always at "" (its default value) and when I type inside the input, the store value still at ""

I tried this : 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,
  },
  puted: {
    inputValue: () => store.state.inputValue,
  },
  methods: {
    setInputValue: (payload) => {
      storemit("setInputValue", payload);
    }
  },
};
</script>

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

and this : 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;
    },
  },
});

I'm new with VueJS, and I'm creating a VueJS app where you can get some informations about a Github User, (example: https://api.github./users/versifiction)

I created a store with VueX, but I need to update the value written by the user in the input, My "inputValue" is always at "" (its default value) and when I type inside the input, the store value still at ""

I tried this : 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,
  },
  puted: {
    inputValue: () => store.state.inputValue,
  },
  methods: {
    setInputValue: (payload) => {
      store.mit("setInputValue", payload);
    }
  },
};
</script>

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

and this : 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;
    },
  },
});

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuex

Share Improve this question Follow edited May 22, 2020 at 14:27 Boussadjra Brahim 1 asked May 22, 2020 at 13:12 VersifiXionVersifiXion 2,29277 gold badges2727 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

According to the vuex docs in the form handling section you should do :

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

and

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

The simplest and elegant way to bind vuex and a ponent would be to use puted properties. The above code would bee,

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

and inside your puted properties, you'll need to replace inputValue with following code.

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

本文标签： javascriptBind a VueX store state value to an input (VueJS)Stack Overflow