15 个 Vue3 全家桶开发的避坑经验( 四 ) _Vue3

preprocessorOptions: {
scss: {
additionalData: '$primary: #993300'
}
}
}
})
三、VueRouter 1. -setup 模式下获取路由参数

文档地址：https://router.vuejs.org/zh/guide/advanced/composition-api.html

由于在 -setup模式下，没有 this可以使用，就不能直接通过 this.$router或 this.$route来获取路由参数和跳转路由。当我们需要获取路由参数时，就可以使用 vue-router提供的 useRoute方法来获取，使用如下：
// A.vue
< setup lang="ts">
import { ref, onMounted } from 'vue';
import router from "@/router";
import { useRoute } from 'vue-router'
let detailId = ref<string>('');
onMounted( => {
const route = useRoute;
detailId.value = https://www.isolves.com/it/cxkf/qd/2022-08-16/route.params.id as string; // 获取参数
})
</>
如果要做路由跳转，就可以使用 useRouter方法的返回值去跳转：
constrouter = useRouter;
router.push({
name: 'search',
query: { /**/},
})
四、Pinia 1. store 解构的变量修改后没有更新

文档地址：https://pinia.vuejs.org/core-concepts/#using-the-store

当我们解构出 store 的变量后，再修改 store 上该变量的值，视图没有更新：
// A.vue
< setup lang="ts">
import componentStore from "@/store/component";
const componentStoreObj = componentStore;
let { name } = componentStoreObj;
const changeName = => {
componentStoreObj.name = 'hello pingan8787';
}
</>
<template>
<span @click="changeName">{{name}}</span>
</template>
这时候点击按钮触发 changeName事件后，视图上的 name并没有变化。这是因为 store 是个 reactive 对象，当进行解构后，会破坏它的响应性。所以我们不能直接进行解构。这种情况就可以使用 Pinia 提供 storeToRefs工具方法，使用起来也很简单，只需要将需要解构的对象通过 storeToRefs方法包裹，其他逻辑不变：
// A.vue
< setup lang="ts">
import componentStore from "@/store/component";
import { storeToRefs } from 'pinia';
const componentStoreObj = componentStore;
let { name } = storeToRefs(componentStoreObj); // 使用 storeToRefs 包裹
const changeName = => {
componentStoreObj.name = 'hello pingan8787';
}
</>
<template>
<span @click="changeName">{{name}}</span>
</template>
这样再修改其值，变更马上更新视图了。
2. Pinia 修改数据状态的方式
按照官网给的方案，目前有三种方式修改：

通过 store.属性名赋值修改单笔数据的状态；

这个方法就是前面一节使用的：
constchangeName = => {
componentStoreObj.name = 'hello pingan8787';
}

通过 $patch方法修改多笔数据的状态；

文档地址：https://pinia.vuejs.org/api/interfaces/pinia._StoreWithState.html#patch

当我们需要同时修改多笔数据的状态时，如果还是按照上面方法，可能要这么写：
constchangeName = => {
componentStoreObj.name = 'hello pingan8787'
componentStoreObj.age = '18'
componentStoreObj.addr = 'xiamen'
}
上面这么写也没什么问题，但是 Pinia 官网已经说明，使用 $patch的效率会更高，性能更好，所以在修改多笔数据时，更推荐使用 $patch，使用方式也很简单：
constchangeName = => {
// 参数类型1：对象
componentStoreObj.$patch({
name: 'hello pingan8787',
age: '18',
addr: 'xiamen',
})
// 参数类型2：方法，该方法接收 store 中的 state 作为参数
componentStoreObj.$patch( state=> {
state.name = 'hello pingan8787';
state.age = '18';
state.addr = 'xiamen';
})
}

通过 action方法修改多笔数据的状态；

也可以在 store 中定义 actions 的一个方法来更新：
// store.ts
import{ defineStore } from'pinia';
exportdefaultdefineStore({
id: 'testStore',
state: => {
return{
name: 'pingan8787',
age: '10',