快速入门
安装方式
用你最喜欢的包管理器安装 pinia
:
bash
yarn add pinia
# or with npm
npm install pinia
1
2
3
2
3
TIP
如果您的应用使用的是 Vue <2.7,您还需要安装组合 API:@vue/composition-api
。 如果您使用 Nuxt,则应遵循 这些说明。
如果你使用的是 Vue CLI,你可以试试这个 非官方插件。 创建一个 pinia 实例(根存储)并将其作为插件传递给应用程序:
js
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')
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
如果您使用的是 Vue 2,您还需要安装一个插件并将创建的 pinia
注入应用程序的根目录:
js
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// other options...
// ...
// 请注意,可以在同一页面上的多个 Vue 应用程序中使用相同的 `pinia` 实例
pinia,
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
这也将添加 devtools 支持。 在 Vue 3 中,仍然不支持时间旅行和编辑等一些功能,因为 vue-devtools 尚未公开必要的 API,但 devtools 具有更多功能,并且整体开发人员体验要优越得多。 在 Vue 2 中,Pinia 使用 Vuex 的现有接口(因此不能与它一起使用)。
什么是商店?
一个商店(如 Pinia)是一个实体,它持有未绑定到您的组件树的状态和业务逻辑。 换句话说,它托管全局状态。 它有点像一个始终存在并且每个人都可以读取和写入的组件。 它有三个概念,state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的data
、computed
和methods
。
我什么时候应该使用商店
存储应该包含可以在整个应用程序中访问的数据。 这包括在许多地方使用的数据,例如 导航栏中显示的用户信息,以及需要通过页面保留的数据,例如 一个非常复杂的多步骤表格。
另一方面,您应该避免在存储中包含可以托管在组件中的本地数据,例如 页面本地元素的可见性。
并非所有应用程序都需要访问全局状态,但如果您需要一个,Pania 将使您的生活更轻松。