Vue JS/Vuex - Getter ID 未使用路由参数 ID 更新答案

【问题标题】：Vue JS/Vuex - Getter ID not updating with route param IDVue JS/Vuex - Getter ID 未使用路由参数 ID 更新
【发布时间】：2021-09-06 23:07:19
【问题描述】：

我根据我在路由参数中传递的 ID 获取用户 ID。当我第一次加载页面并访问其中一个用户时，getter 会相应地显示路由参数中的 ID，但是一旦我返回并单击另一个用户，参数中的 ID 与 getter 不匹配。相反，getter 显示先前访问的用户的 ID。任何人都可以提出解决方案吗？

setup() {
    const store = vuexStore;
    const adminId = router.currentRoute.params.adminId;
    console.log("ID param:", adminId);

    getSelectedAdmin();
    const selectedAdmin = computed(() => store.getters.getSelectedAdmin);
    console.log("getter Id:", selectedAdmin.value.id);

    function getSelectedAdmin() {
      return store.dispatch(GET_ADMIN_BY_ID, adminId)
    }

    return {
      selectedAdmin,
    }
  }

【问题讨论】：

标签： javascript vue.js vuex vuejs3

【解决方案1】：

您应该在 onMounted 挂钩中获取用户。
（我使用脚本设置，vue-router@next & vuex@next）

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useStore } from 'vuex'

  const store = useStore()
  const route = useRoute()

  const selectedAdmin = computed(() => store.getters['getSelectedAdmin'])
  onMounted(async () => { await store.dispatch('GET_ADMIN_BY_ID', route.params.adminId) })
</script>

<template>
 <div v-if="selectedAdmin">
  {{ selectedAdmin.username }}
 </div>
 <div v-else>Loading ...</div>
</template>

在你的店里：

将 selectedAdmin 的初始值设置为 null
在 GET_ADMIN_BY_ID 操作中，在更新前将 selectedAdmin 重置为 null

const state = {
  currentAdmin: null,
}

const mutations = {
  SET_ADMIN: (state, payload) => state.currentAdmin = payload
}

const getters = {
  getSelectedAdmin: (state) => state.currentAdmin
}

const actions = {
  GET_ADMIN_BY_ID: ({ commit }, id) => {
    commit('SET_ADMIN', null)
    return axios.get(`admin/${id}`)
    .then((response) => { commit('SET_ADMIN', response.data) })
    .catch((err) => { commit('SET_ADMIN', null) })
  }

【讨论】：