Nuxt.js 3中ref使用问题：单选切换时params未更新

通过单选按钮切换状态（Active、Draft、Trash）时，需要更新API请求的params参数以获取对应状态的数据。目前遇到的问题是：切换单选框后，params始终输出初始值：

api_key=**********&language=en-US&deletedStatus=false&byCity=&byCountry=&page=1&ActiveStatus=true&limit=20

但在Vue DevTools中，单个ref变量（如deletedStatus、ActiveStatus）已经正确更新。相关代码如下：

<template>
  <div
    v-for="(status, index) in StatusOptions"
    :key="index"
    class="field-radiobutton ttc-pr-2"
  >
    <RadioButton
      :id="status.value"
      name="status"
      :value="status.value"
      @change="ChangeState(status.value)"
    />
    <label>{{ status.name }}</label>
  </div>
</template>
            
<script setup>
import { ref, reactive } from "vue";
const { apiUrl } = useRuntimeConfig();
const router = useRouter();
const route = useRoute();

const deletedStatus = ref(false);
const byCity = ref("");
const byCountry = ref("");
const page = ref(1);
const ActiveStatus = ref(true);
const limit = ref(20);

const StatusOptions = ref([
  { name: "Active", value: "Active" },
  { name: "Draft", value: "Draft" },
  { name: "Trash", value: "Trash" },
]);

const ChangeState = (state) => {
  if (state == `Active`) {
    deletedStatus.value = false;
    ActiveStatus.value = true;
  }
  if (state == `Draft`) {
    ActiveStatus.value = false;
  }
  if (state == `Trash`) {
    ActiveStatus.value = false;
    deletedStatus.value = true;
  }
  console.log(params.value)
  FetchTours();
};

const params = ref(
  [
    "api_key=****************",
    "language=en-US",
    `deletedStatus=${deletedStatus.value}`,
    `byCity=${byCity.value}`,
    `byCountry=${byCountry.value}`,
    `page=${page.value}`,
    `ActiveStatus=${ActiveStatus.value}`,
    `limit=${limit.value}`,
  ].join("&")
);

const FetchTours = async () => {
  const { data } = await useFetch(`${apiUrl}/tours/gettours?${params.value}`, {
    key: "someKey",
    initialCache: false,
  });
  AllTours.value = data.value;
};
</script>

问题原因 #

params被初始化为一个固定字符串，仅在组件初始化时使用当时的ref值生成一次。后续ref变量更新时，params的字符串不会自动同步更新，因为它不具备响应式依赖追踪能力。

解决方案 #

方式一：使用computed响应式计算参数 #

将params改为计算属性，它会自动追踪依赖的ref变量，当变量变化时重新生成最新的参数字符串：

import { ref, computed } from "vue";

// ... 其他代码保持不变

const params = computed(() => [
  "api_key=****************",
  "language=en-US",
  `deletedStatus=${deletedStatus.value}`,
  `byCity=${byCity.value}`,
  `byCountry=${byCountry.value}`,
  `page=${page.value}`,
  `ActiveStatus=${ActiveStatus.value}`,
  `limit=${limit.value}`,
].join("&"));

方式二：状态切换时手动更新params #

如果不想使用计算属性，可在ChangeState函数末尾手动重新生成params的值：

const ChangeState = (state) => {
  if (state == `Active`) {
    deletedStatus.value = false;
    ActiveStatus.value = true;
  }
  if (state == `Draft`) {
    ActiveStatus.value = false;
  }
  if (state == `Trash`) {
    ActiveStatus.value = false;
    deletedStatus.value = true;
  }
  // 手动更新params
  params.value = [
    "api_key=****************",
    "language=en-US",
    `deletedStatus=${deletedStatus.value}`,
    `byCity=${byCity.value}`,
    `byCountry=${byCountry.value}`,
    `page=${page.value}`,
    `ActiveStatus=${ActiveStatus.value}`,
    `limit=${limit.value}`,
  ].join("&");
  console.log(params.value)
  FetchTours();
};

推荐使用方式一，computed能自动处理响应式依赖，代码更简洁且不易出错。

内容的提问来源于stack exchange，提问作者imthegrv