Vuex가 한 방향으로만 업데이트되는 Vue md-input

Vuex가 한 방향으로만 업데이트되는 Vue md-input

Vue 앱에 다음과 같은 입력 요소가 바인딩되어 있는 경우:

<template>
   <input v-model="this.$store.state.myvalue"/>
</template>

그리고 VueXstore/index.js:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    myvalue: null
  },
  mutations: {},
  actions: {},
  modules: {}
});

수정할 때myvalueVue devtools를 사용하면 입력 값도 변경되지만 입력 필드에서 값을 변경해도 상태 변수는 변경되지 않는다.내가 뭘 잘못하고 있는 거지?나 VueX 처음이야.

뷰 계층과 직접 바인딩된 vuex 상태를 사용하는 것이 제안되지는 않지만, vuex를 비즈니스 논리에 사용하는 것이 더 좋으며, 아래에 언급된 방법으로 사용자 입력에 대한 상태 변경을 달성할 수 있다.

[1] 양방향 데이터 바인딩: v-model 지시어를 사용하고 그 안에 있는 상태를 바인딩하십시오.사용자 입력 시 상태가 업데이트된다.프로그래밍 방식으로 상태를 변경하면 요소의 값이 업데이트되고 돔에 반영된다.

.vue 파일

<template>
   <input v-model="$store.state.myvalue"/>
</template>

[2] 양방향 데이터 수집을 수동으로 생성한다.

.vue 파일

<template>
   <input :value="getMyValue" @input="handleInput"/>
</template>

<script>
export default {
 methods: {
  handleInput (value) {
   this.$store.commit('UPDATE_MY_VALUE', { value })
  }
 },
 computed: {
  getMyValue () {
   return this.$store.state.myvalue
  }
 }
}
</script>

저장 파일

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    myvalue: null
  },
  mutations: {
   UPDATE_MY_VALUE (state, { value }) {
    state.myvalue = value
   }
  },
  actions: {},
  modules: {}
});

입력 필드에서 값을 변경해도 상태 변수는 변경되지 않는다.

변하기는 하지만, Dev 툴은 단지 변화를 보여주지 않는다.템플릿을 다음으로 변경하여 검증할 수 있다.

<template>
  <div>
    <input type="text" v-model="$store.state.myvalue">
    <div>{{ $store.state.myvalue }}</div>
  </div>
</template>

하지만 이렇게 Vuex 상태를 변이해서는 안 된다!Vuex는 그것을 허용하지만 그것은 권장되지 않는다.이유는 상태 변경이 추적 가능해야 하기 때문이다(어떤 구성요소가 상태를 변경했는지, 언제 변경되었는지 쉽게 찾을 수 있음).그래서 Vuex는 돌연변이를 통해서만 상태를 바꿀 것을 권하고 있는 것이다.돌연변이는 기본적으로 상태 변화가 필요할 때 부르는 기능이다.

Vuex 상태에 대해 양방향 데이터 바인딩을 수행하는 가장 좋은 방법은 다음과 같은 getter/seter와 함께 계산된 속성을 사용하는 것이다.

<template>
  <div>
    <input v-model="myvalue">
    <div>{{ myvalue }}</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  computed: {
    myvalue: {
      get: function() {
        return this.$store.state.myvalue;
      },
      set: function(value) {
        this.$store.commit("change_myvalue", value);
      }
    }
  }
};
</script>

상점의 돌연변이를 정의해야 다음과 같이 작동할 수 있다.

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    myvalue: ""
  },
  mutations: {
      change_myvalue(state, value) {
          state.myvalue = value
      }
  },
  actions: {},
  modules: {}
});

여기서 돌연변이에 대해 자세히 알아보십시오.

참조URL: https://stackoverflow.com/questions/59114795/vue-md-input-with-vuex-updating-only-in-one-direction