526互联

在ts文件中使用pinia

发布时间 2023-12-13 14:21:30作者: 奔跑的哈密瓜

我们在vue组件中使用pinia时，可以通过下面代码来实现

<script lang="ts" setup>
import {useUserStore} from "@/store/userStore"
const userStore = useUserStore()
</script>

但是我们在ts/js文件中想要使用pinia时，会发现它会报警告，如下

 解决方法

import store from "@/store/index"
import {useUserStore} from "@/store/userStore"
import { storeToRefs } from 'pinia';

const stores = useUserStore(store);

const {locale} = storeToRefs(stores);//locale为useUserStore仓库中的一个参数

其中@/store/index文件为创建创建仓库的文件，如下：

// 安装状态管理插件
import {createPinia} from 'pinia';
// 进行pinia持久化配置
import piniaPluginPersist  from 'pinia-plugin-persist'

const store = createPinia();

store.use(piniaPluginPersist);

export default store;