安装状态管理 pinia

安装

1. 安装 pinia 库

yarn add pinia
# 或者使用 npm
npm install pinia

2. 在main.js 中导入 pinia 并使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'  //1.导入
import App from './App.vue'

　

const pinia = createPinia()//2.创建
const app = createApp(App)

　

app.use(pinia) //使用
app.mount('#app')

　　

　

　

Store 是什么？#

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

应该在什么时候使用 Store?#

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。