vue.js - Vue组件上的两种数据流

Question

我希望在更新 Vuex 中的存储值时更新 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.Store——这工作正常，不是问题。

当在应用程序的其他位置选择新的editedTeam 时，我希望存储在editedTeam 中的团队能够反应性地更新在v-autocomplete 组件中选择的团队。我希望 v-autocomplete 选择器在选择时将新团队发送到editedTeam。我认为我应该为此使用 mapState 并将它们存储为计算值——但我尝试过的任何方法都没有奏效。我发现 vuex 文档缺少很好的示例。

谢谢！

标签： vue.jsvuetify.jsvuex