Vue 컴포넌트의 양방향 데이터 흐름

Vue 컴포넌트의 양방향 데이터 흐름

Vue에 저장된 값이 업데이트될 때 Vue 구성 요소의 선택기를 업데이트해야 합니다.다음은 vue 구성 요소의 단순화된 버전입니다.

<template>
    <v-autocomplete
      outlined
      dense
      v-model="team"
      label="Select Team"
      :items="teams"
      item-text="name"
      item-value="_id"
      return-object
      class="mx-3 mt-3"
      @change="selectTeam"
    ></v-autocomplete>
</template>

JS:

<script>
export default {
  name: 'NavDrawer',
  data() {
    return {
      team: null,
      teams: [],
    };
  },
  async created() {
    this.team = this.$store.getters['teams/allTeams'].find(
      (t) => t.name === this.$route.params.team,
    );
    this.teams = this.$store.getters['teams/allTeams'];
  },
  methods: {
    async selectTeam() {
      if (this.team) {
        await this.$store.dispatch('editTeam/selectTeam', this.team);
        this.$router.push(`/team/${this.team.name}`);
      } else {
        this.$router.push('/');
      }
    },
  },
};
</script>

Vuex 스토어:

export default {
  namespaced: true,
  state: () => ({
    editedTeam: {},
  }),
  mutations: {
    selectTeam(state, team) {
      state.editedTeam = team;
    },
    resetTeam(state) {
      state.editedTeam = {};
    },
  },
  actions: {
    selectTeam({ commit }, team) {
      commit('selectTeam', team);
    },
    resetTeam({ commit }) {
      commit('resetTeam');
    },
  },
  getters: {
    getSelectedTeam: (state) => state.editedTeam,
  },
};

문제가 될지는 모르겠지만 이 vuex 저장소는 Vuex를 생성하기 위해 인덱스 파일로 전달됩니다.저장소 - 올바르게 작동하며 문제가 아닙니다.

팀을 편집한 곳에 저장해 주세요.팀은 v-autocomplete 구성 요소에서 선택한 팀을 새로 편집한 경우 대응적으로 업데이트합니다.팀은 어플리케이션의 다른 곳에서 선택됩니다.v-autocomplete 선택기에서 편집된 새 팀을 보내기를 원합니다.선택되었을 때 팀을 구성합니다.이 경우 mapState를 사용하여 계산값으로 저장해야 한다고 생각합니다만, 지금까지 실행한 것은 없습니다.vuex 문서는 좋은 예에서 찾을 수 없습니다.

감사합니다!

언급URL : https://stackoverflow.com/questions/66499628/two-way-data-flow-on-vue-component