v-model을 사용하여 Vuex 저장소를 수정하시겠습니까?

v-model을 사용하여 Vuex 저장소를 수정하시겠습니까?

안녕하세요 저는 Vue의 초보자이고 저를 괴롭히는 문제가 있습니다.v-model 디렉티브를 사용하여 vuex 스토어를 수정해야 합니까?Vuex는 돌연변이를 통해서만 vuex 저장소를 수정해야 한다고 하지만 v-model을 사용하면 모든 것이 쉽고 짧아집니다.(명확한 답을 찾을 수 없어서 물어봅니다)

https://vuex.vuejs.org/guide/forms.html

Vuex를 strict 모드로 사용하는 경우 사용법이 다소 까다로울 수 있습니다.v-modelVuex 소유의 주(州)에 있는 주(州)에 있는 주(州)에서요

이 문제를 해결하기 위한 "Vuex 방식"은 다음과 같습니다.<input>입력 이벤트 또는 변경 이벤트에 대한 액션을 호출합니다.

이 페이지에서 간단한 "Two-way Calculated Property" 예를 확인하십시오.

<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

여기에서는 어떤 답변에서도 언급되지 않은 다른 좋은 옵션은 vuex-map-fields를 사용하는 것이라고 생각합니다.사실, 도서관의 저자는 도서관의 유용성에 대해 아주 좋은 설명을 썼다.GitHub 페이지에 따르면 라이브러리를 사용하려면 다음과 같은 작업을 수행할 수 있습니다.

Vuex 스토어에는 다음과 같은 스니펫이 있습니다.

import Vue from 'vue';
import Vuex from 'vuex';

import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

export default new Vuex.Store({
  // ...
  modules: {
    fooModule: {
      namespaced: true,
      state: {
        foo: '',
      },
      getters: {
        getField,
      },
      mutations: {
        updateField,
      },
    },
  },
});

컴포넌트 코드에는 다음과 같은 내용이 포함되어 있습니다.

<template>
  <div id="app">
    <input v-model="foo">
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    // `fooModule` is the name of the Vuex module.
    ...mapFields('fooModule', ['foo']),
  },
};
</script>

이 답변의 첫 문장에 링크된 라이브러리의 GitHub 저장소에 다양한 사용 사례에 대한 추가 예가 나와 있습니다.

위의 솔루션은 돌연변이를 사용하여 구현할 수도 있습니다.

<template>
  <input v-model="message">
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  computed: {
    ...mapState({messageFromStore: 'message'}),
    message: {
      get() {
        return this.messageFromStore;
      },
      set(value) {
        this.updateMessage(value);
      }
    }
  },
  methods: {
    ...mapMutations('updateMessage')
  }
};
</script>

이에 대한 나의 해결책은 getter를 사용하여value그리고.@input돌연변이를 부르기 위해서요

<input
  type="text"
  :value="$store.getters.apartmentStreet"
  @input="value => $store.commit('apartmentValue', { handle: 'street', value })"
>

getters.getters:

export default {
  apartmentStreet: state => state.apartment.street,
};

돌연변이.복제

export default {
  apartmentValue(state, payload) {
    let oldValue = state.apartment[payload.handle];
    let newValue = payload.value;
    if (newValue !== oldValue) state.apartment[payload.handle] = payload.value;
  }
};

이 방법을 사용할 경우 원하는 이벤트를 선택하십시오.

저는 이 솔루션을 사용합니다.

data() {
  return {
    formData: {
      username: '',
      email: '',
      bio: {
        firstName: '',
        lastName: ''
      },
      games: ['civ4', 'caesar3', 'homeworld', 'cataclysm'],
         
    }
  }
},
computed: {
  ...mapGetters({   //or mapState
    user: 'users'
  })
},
watch: {
  user(newValue) {
    this.formData.username = newValue.name;
    this.formData.email = newValue.email;
    this.formData.bio.firstName = newValue.bio.firstName;
    this.formData.bio.lastName = newValue.bio.lastName;
    this.formData.games = newValue.games.map(x=> { return x });
  }
},
beforeCreate: fucntion() {
  this.$store.dispatch('getUser');
}

그런 다음 v-model을 정기적으로 사용합니다.맵을 배열에 사용하는 등 오브젝트를 스토어에서 상세하게 복사하는 것이 중요합니다.또, 오브젝트내의 조작도 중요합니다.

또한 빈 필드를 사용하여 이 사용자 개체를 저장소에서 시작해야 합니다.

네, 할 수 있지만 베스트 프랙티스는 아닙니다.

문서에 기술되어 있듯이 상태에 대한 제어권을 유지하기 위해 상태를 내부 돌연변이에서만 업데이트해야 합니다.

하지만 꼭 하고 싶다면 다음 방법으로 할 수 있습니다.

v-model="$store.state.yourProperty"

언급URL : https://stackoverflow.com/questions/54928111/should-we-use-v-model-to-modify-vuex-store