The value of the object stored by pinia is set and disappears

[Feyl]

When I click the View button, I set a value for the property of the object stored in pinia.

The code to set the value is as follows:

const handleDetail = (index, row) => {
  console.log(index, row);
  umsUniversityStore.university.detailId = row.id;
  router.push({ path: "/ums/university/info/detail" });
};

The id of Zhejiang University is 3
So means that at this point umsUniversityStore.university.detailId value should be 3

The objects stored in pinia are as follows:

import { defineStore } from "pinia";

export const useUmsUniversityStore = defineStore("umsUniversity", {
  state: () => ({
    university: {
      operate: "edit", // "add" 或 "edit"
      id: 1,
      detailId: 1,
    },
  }),
  actions: {
    setUniversityId(universityId) {
      this.university.id = universityId;
    },
  },
});

I was able to enter the details of Zhejiang University page

Because I now by umsUniversityStore.university.detailId get id to zhejiang university

But a strange situation arose：

When I click on the button to reroute to enter this page, get umsUniversityStore.university.detailId value is the initial value 1.
Set before umsUniversityStore.university.detailId value 3 disappeared.

As a result, I entered the details page of Tsinghua University, and the id corresponding to Tsinghua University was the initial value 1.

The second link（2.信息详情） clicked corresponds to the following code：

        <el-link
          href="/ums/university/info/detail"
          type="primary"
          :underline="false"
          >信息详情</el-link>

The following figure shows the parent-child component relationship：

The detailed code is as follows:
URI: /ums/university/list

<template>
  <div class="university-list">
    <el-row>
      <el-col :span="20" :offset="2">
        <el-row>
          <el-col :span="2" :offset="22">
            <el-button type="primary" :icon="School" @Click="toAddUniversity"
              >添加学校</el-button
            >
          </el-col>
        </el-row>
        <el-row class="search">
          <el-col :span="8">
            <el-input v-model="nameCn" placeholder="高校名称" />
          </el-col>
          <el-col :span="2" :offset="14">
            <el-button type="primary" :icon="Search" @Click="searchUniversities"
              >搜索</el-button
            >
          </el-col>
        </el-row>

        <el-row>
          <el-table
            ref="multipleTableRef"
            :data="universities"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column label="序号" width="60">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.$index }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="高校名称" width="400">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.nameCn }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="英文简称" width="120">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.abbreviation }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="办学层次" width="120">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.adminType }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="所属省份" width="120">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.province }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleDetail(scope.$index, scope.row)"
                  >查看</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row class="pagination">
          <el-col :span="4">
            <el-button
              type="danger"
              :icon="Delete"
              @Click="batchRemoveUniversity"
              >批量删除</el-button
            >
          </el-col>
          <el-col :span="10" :offset="6">
            <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { School, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUmsUniversityStore } from "@/stores/ums/university";
import { getUniversityPage, batchDeleteUniversity } from "@/api/ums/university";

const nameCn = ref("");

const universities = ref([]);
const multipleTableRef = ref();
const multipleSelection = ref([]);

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

let umsUniversityStore = useUmsUniversityStore();

const router = useRouter();

function toAddUniversity() {
  umsUniversityStore.university.operate = "add";
  router.push({ path: "/ums/university/add" });
}

const handleDetail = (index, row) => {
  console.log(index, row);
  umsUniversityStore.university.detailId = row.id;
  router.push({ path: "/ums/university/info/detail" });
};

const handleEdit = (index, row) => {
  console.log(index, row);
  umsUniversityStore.university.operate = "edit";
  umsUniversityStore.university.id = row.id;
  router.push({ path: "/ums/university/edit" });
};

const handleDelete = (index, row) => {
  console.log(index, row);
  let ids = [];
  ids.push(row.id);
  deleteUniversities(ids);
};

function batchRemoveUniversity() {
  let ids = [];
  multipleSelection.value.forEach((e) => {
    ids.push(e.id);
  });
  deleteUniversities(ids);
}

function deleteUniversities(ids) {
  batchDeleteUniversity(ids).then((resp) => {
    ElMessage({
      message: resp.message,
      type: "success",
    });
    searchUniversities();
  });
}

function searchUniversities() {
  let getUniversitiesParam = new URLSearchParams();
  if (nameCn.value != undefined && nameCn.value != "")
    getUniversitiesParam.set("nameCn", nameCn.value);
  getUniversitiesParam.set("pageNum", pageNum.value);
  getUniversitiesParam.set("pageSize", pageSize.value);

  getUniversityPage(getUniversitiesParam).then((resp) => {
    total.value = resp.data.total;
    let universityList = resp.data.list;
    universities.value.length = 0;
    universityList.forEach((university) => {
      universities.value.push(university);
    });
  });
}

const total = ref(100);
const pageNum = ref(1);
const pageSize = ref(10);

const handleSizeChange = (size) => {
  pageSize.value = size;
  searchUniversities();
};
const handleCurrentChange = (cur) => {
  pageNum.value = cur;
  searchUniversities();
};

onMounted(() => {
  searchUniversities();
});
</script>

<style scoped lang="less">
.university-list {
  margin-top: 40px;
  .search {
    margin: 30px 0;
  }
}

.pagination {
  margin-top: 30px;
}
</style>

URI: /ums/university/info/detail

<template>
  <div class="university-detail">
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card shadow="never" class="box-card">
          <el-form label-position="left" label-width="100px">
            <el-row>
              <el-col :span="8" :offset="2">
                <el-form-item label="中文名称：">
                  <span>{{ university.nameCn }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item label="英文简称：">
                  <span>{{ university.abbreviation }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8" :offset="2">
                <el-form-item label="英文名称：">
                  <span>{{ university.nameEn }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item label="院校类型：">
                  <span>{{ university.category }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8" :offset="2">
                <el-form-item label="办学层次：">
                  <span>{{ university.adminType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item label="学校特色:">
                  <span v-if="university.doubleFirstClass">双一流</span>
                  <template v-if="university.project211">
                    <el-divider direction="vertical" />
                    <span>211工程</span>
                  </template>

                  <template v-if="university.project985">
                    <el-divider direction="vertical" />
                    <span>985工程</span>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8" :offset="2">
                <el-form-item label="所属省份：">
                  <span>{{ university.province }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item label="所属城市：">
                  <span>{{ university.city }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18" :offset="2">
                <el-form-item label="官方网站：">
                  <el-link
                    :href="university.officialWebsite"
                    target="_blank"
                    :underline="false"
                    >{{ university.officialWebsite }}</el-link
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUmsUniversityStore } from "@/stores/ums/university";
import { getUniversityById } from "@/api/ums/university";

const university = ref({
  id: null,
  nameCn: null,
  nameEn: null,
  abbreviation: null,
  adminType: null,
  category: null,
  province: null,
  city: null,
  doubleFirstClass: null,
  project985: null,
  project211: null,
  officialWebsite: null,
});

function getUniversity() {
  let umsUniversityStore = useUmsUniversityStore();
  const getUniversityByIdParam = new URLSearchParams();
  getUniversityByIdParam.set("id", umsUniversityStore.university.detailId);
  getUniversityById(getUniversityByIdParam).then((resp) => {
    university.value = resp.data;
  });
}

onMounted(() => {
  let umsUniversityStore = useUmsUniversityStore();
  if (umsUniversityStore.university.operate == "edit") {
    getUniversity();
  }
});
</script>

<style scoped lang="less">
.university-detail {
  margin-top: 40px;

  .box-card {
    border-radius: 2%;
  }
}
</style>

parent-component URI: /ums/university

<template>
  <div class="university-info">
    <el-row>
      <el-col :span="10" :offset="2">
        <p class="nameCn">{{ university.nameCn }}</p>
        <p class="nameEn">
          {{ university.nameEn }} · {{ university.abbreviation }}
        </p>
      </el-col>
      <el-col :span="6" :offset="5" class="router-links">
        <el-link
          href="/ums/university/info/detail"
          type="primary"
          :underline="false"
          >信息详情</el-link>
        <el-button
          type="success"
          link
          @Click="toCollegeList"
          >学院列表</el-button
        >
        <!-- <el-link
          href="/ums/university/info/college/list"
          type="success"
          :underline="false"
          >学院列表</el-link
        > -->
        <el-link
          href="/ums/university/info/student"
          style="color: coral"
          :underline="false"
          >学生列表</el-link
        >
      </el-col>
    </el-row>
    <el-divider />
    <router-view />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUmsUniversityStore } from "@/stores/ums/university";
import { getUniversityById } from "@/api/ums/university";

const university = ref({
  id: null,
  nameCn: null,
  nameEn: null,
  abbreviation: null,
  adminType: null,
  category: null,
  province: null,
  city: null,
  doubleFirstClass: null,
  project985: null,
  project211: null,
  officialWebsite: null,
});

function getUniversity() {
  let umsUniversityStore = useUmsUniversityStore();
  const getUniversityByIdParam = new URLSearchParams();
  getUniversityByIdParam.set("id", umsUniversityStore.university.detailId);
  getUniversityById(getUniversityByIdParam).then((resp) => {
    university.value = resp.data;
  });
}

const router = useRouter();

function toCollegeList(){
  let umsUniversityStore = useUmsUniversityStore();
  umsUniversityStore.university.detailId = university.value.id;
  router.push({ path: "/ums/university/info/college/list" })
}

onMounted(() => {
  let umsUniversityStore = useUmsUniversityStore();
  if (umsUniversityStore.university.operate == "edit") {
    getUniversity();
  }
});
</script>

<style scoped lang="less">
.university-info {
  margin-top: 10px;
  .nameCn {
    font-size: large;
    font-weight: bold;
  }

  .nameEn {
    margin-top: 6px;
    color: #606266;
  }

  .router-links {
    .el-link {
      margin: 30px 10px 0;
    }
  }
}
</style>

router:

{
    path: "/ums/university",
    component: Layout,
    redirect: "/ums/university/list",
    name: "ums-university",
    meta: { title: "招聘信息", icon: "" },
    children: [
      {
        path: "list",
        name: "ums-university-list",
        component: () => import("@/views/ums/university/List.vue"),
        meta: { title: "学校列表", icon: "" },
        hidden: true,
      },
      {
        path: "info",
        name: "ums-university-info",
        component: () => import("@/views/ums/university/University.vue"),
        redirect: "/ums/university/info/detail",
        meta: { title: "学校信息", icon: "" },
        children: [
          {
            path: "detail",
            name: "ums-university-detail",
            component: () => import("@/views/ums/university/Detail.vue"),
            meta: { title: "学校信息详情", icon: "" },
          },
        ],
      },
    ],
  },

[Feyl]

Maybe I clicked the hyperlink to refresh the page, which invalidated the value I had stored in pinia.
But I have another question, I jump according to a relative path, why does it cause a page refresh?

[Feyl]

ME：在页面中我使用相对路径进行跳转，为什么会导致页面刷新？
ChatGPT：当您在页面中使用相对路径进行跳转时，如果目标链接的路径与当前页面的路径不同，浏览器将重新加载整个页面，因为浏览器需要获取新页面的 HTML、CSS、JavaScript 和其他资源。这将导致页面刷新，并导致 Pinia 中存储的状态值丢失。

相反，如果您使用 Vue Router 进行导航，Vue Router 将会使用 JavaScript 动态加载适当的组件，而不会重新加载整个页面，因此不会导致页面刷新。这将允许您保留在 Pinia 中存储的状态值。

例如，在 Vue.js 应用程序中，您可以使用以下代码来设置 Vue Router：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个例子中，我们定义了两个路由：/ 和 /about。我们使用 createRouter 和 createWebHistory 创建了一个新的 Vue Router 实例，并将其导出。

然后，您可以在组件中使用 router-link 组件来创建一个可点击的链接：

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

在这个例子中，我们在模板中使用了 router-link 组件，它将生成一个可点击的链接，用于在应用程序中导航到指定的路由。当用户点击链接时，Vue Router 将加载适当的组件，而不会导致整个页面刷新。这样，您就可以在 Pinia 中保留存储的状态值。