Vue3使用Pinia

博主： xiaoxiao
发布时间：2023 年 04 月 30 日
841 次浏览
暂无评论
2999字数
分类： Vue 笔记 JavaScript 前端

# 什么是pinia

Pinia 是一个轻量级、直观和可扩展的[状态管理](https://www.xxhzm.cn/archives/785/)库，专为 Vue 3 设计。它提供了一个响应式的状态管理系统，可以轻松地在 Vue 3 应用程序中管理全局状态和局部状态。相对于 Vuex，Pinia 的设计更加简单和易于理解，同时还提供了一些新特性和更好的性能。

在 Pinia 中，状态被组织成一个或多个“存储库”（Store），每个存储库都包含一个状态对象、一组 getters、一组 actions 和一组 mutations。与 Vuex 不同的是，Pinia 不使用全局的 Store 实例，而是通过 `createPinia` 函数创建一个独立的 Pinia 实例，每个实例都可以拥有自己的存储库，使得状态管理更加模块化和可扩展。

Pinia 还支持插件系统，可以通过插件扩展 Pinia 的功能。例如，可以使用 `pinia-plugin-persistedstate` 插件将 Pinia 状态持久化到本地存储中，以便在页面刷新后仍然保留状态。

总的来说，Pinia 是一个简单、灵活和高效的状态管理库，它可以帮助 Vue 3 应用程序轻松地管理和共享状态，同时也提供了一些新特性和更好的性能。

什么是状态管理呢，具体可以阅读这篇文章，这篇文章详细介绍了vue的状态管理和在vue3中使用vuex

<div class="inner-content" >
<p class="inser-title">vue状态管理详解以及在vue3中使用vuex</p>
<div class="inster-summary text-muted">
为什么要使用状态管理使用状态管理的主要目的是为了更好地管理应用程序的状态。随着应用程序规模的增大，应用程序中的状态...
</div>
</div>
</a>

</div>

</div>

vuex与pinia对比

<div class="inner-content" >
<p class="inser-title">vue3中vuex对比pinia</p>
<div class="inster-summary text-muted">
介绍下面两篇文章详细介绍了vuex和pinia，如有需要可查看对比在 Vue 3 中，Vuex 和 Pinia 都...
</div>
</div>
</a>

</div>

</div>

# 为什么要使用pinia

虽然我们的手动状态管理解决方案在简单的场景中已经足够了，但是在大规模的生产应用中还有很多其他事项需要考虑：

- 更强的团队协作约定
- 与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试
- 模块热更新 (HMR)
- 服务端渲染支持

[Pinia](https://pinia.vuejs.org/zh/) 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。

现有用户可能对 [Vuex](https://vuex.vuejs.org/zh/) 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。

事实上，Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，因此整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

# 使用pinia

1. 安装 Pinia：在项目目录下执行 `npm install pinia` 命令来安装 Pinia。
2. 创建 Pinia 实例：在 `src/store/index.js` 文件中创建 Pinia 实例。

```javascript
import { createPinia } from 'pinia'

export const store = createPinia()

store.state = {
  count: 0
}

store.getters = {
  doubleCount: state => state.count * 2
}

store.actions = {
  increment() {
    store.state.count++
  }
}

store.mutations = {
  resetCount() {
    store.state.count = 0
  }
}
```

在这个例子中，我们使用 `createPinia` 函数来创建一个 Pinia 实例。然后，我们在 `store` 实例上定义了一个 `state` 对象、一个 `getters` 对象、一个 `actions` 对象和一个 `mutations` 对象，用于管理状态、计算属性、异步操作和同步操作。

3. 在 main.js 中注册 store：在 `src/main.js` 文件中，注册并使用 store 实例。

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')
```

在这个例子中，我们将 `store` 实例注册为 Vue 应用程序的插件，并在根组件上使用它。

4. 在组件中使用状态：在组件中使用 `useStore` 函数来访问状态。

```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment()">Increment</button>
    <button @click="resetCount()">Reset</button>
  </div>
</template>

export default defineComponent({
  setup() {
    const store = useStore()

return {
      count: store.state.count,
      doubleCount: store.getters.doubleCount,
      increment: store.actions.increment,
      resetCount: store.mutations.resetCount
    }
  }
})
</script>
```

在这个例子中，我们使用 `useStore` 函数来访问 `store` 实例，并从 `store.state`、`store.getters`、`store.actions` 和 `store.mutations` 中提取所需的属性和方法。在模板中，我们展示了计数器的值、双倍计数器的值，并提供了两个按钮来触发 `increment` 和 `resetCount` 方法。

除了基本用法外，Pinia 还提供了一些高级特性，如模块化和插件系统，可以帮助我们更好地组织和扩展状态管理。