一、pinia是什么?
Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和 methods。
二、应该在什么时候使用 pinia?
一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据,例如显示在导航栏中的用户信息,以及需要通过页面保存的数据,例如一个非常复杂的多步骤表单。
另一方面,你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据,例如,一个元素在页面中的可见性。
并非所有的应用都需要访问全局状态,但如果你的应用确实需要一个全局状态,那 Pinia 将使你的开发过程更轻松。
三、pinia的安装
1、选择自己的包管理器进行安装
yarn add pinia
# 或者使用 npm
npm install pinia
2、在main.ts文件中创建一个pinia实例并将其传递给应用
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
3、在项目文件目录中的src文件夹下新建stores文件夹,然后创建自己的store即可,如下图:
具体写法可以参考下一篇文章:
也可以参考pinia官网定义 Store | Pinia值得你喜欢的 Vue Storehttps://pinia.vuejs.org/zh/core-concepts/