Vue3中使用Pinia

Posted 2023-05-01

参考技术A Vue2 中使用Vuex进行状态管理，在Vue3中，引入了Pinia，如果使用Vue3的脚手架搭建项目，其中包含了简单的示例：

这个示例可以在组件中直接使用，在script setup中引入定义：

然后初始化一个实例：

在模板中就可以调用这个实例了：

其中保存的状态是全局的，如果创建另一个实例，会发现，获取的数据是一样的：

在其它组件中获取的数据也是一样的。
最后说明一下，使用pinia需要在vue项目的入口进行声明和注册：

vue3 门户网站搭建3-pinia

引入 pinia 来方便处理全局变量。

　　npm install pinia

 

1、创建 pinia

 

2、main 中引入（我这里是直接写的 index，所以导出的是 stores）

 

3、定义变量

 使用：

 

注：

开发门户项目过程中，遇到了多个路由使用复用同一个页面的情况，内容显示标题为跳转携带参数传递，但一刷新界面，参数丢失就导致界面内容为空，故调整为用 pinia 记录跳转参数以避免参数丢失。

另因为标题是传参显示，故切换界面语言时，并不能实时刷新，所以增加了监听使用：