将Pinia增加到Vue3项目中

听海边涛声

已于 2024-05-20 08:28:27 修改

阅读量239

点赞数 7

文章标签： Vue Pinia javascript

于 2024-05-18 18:25:39 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139024583

版权

https://pinia.vuejs.org/introduction.html

Pinia始于2019年11月左右，当时是一个实验项目，旨在用Composition API重新设计Vue的Store。自那时起，虽然最初的原则保持不变，但Pinia现在既可以用于Vue 2也可以用于Vue 3，而且不要求你使用组合API。

Pinia是Vue的一个状态管理库，它允许你在组件/页面之间共享状态。它是Vuex的替代品。

Pinia中去掉了mutation，action既支持同步，也支持异步。

Pinia用computed计算属性函数来实现getter。

在Vue3的官网生态系统中，推荐的也是Pinia，而不再是Vuex：
在这里插入图片描述

创建项目

创建一个Vue3项目

先执行npm init vue@latest创建一个空的Vue3项目：
在这里插入图片描述

这样就创建成功了一个Vue3项目：
在这里插入图片描述

到vscode中打开上面创建的项目：
在这里插入图片描述

执行npm install安装项目依赖：
在这里插入图片描述

执行npm run dev运行项目：
在这里插入图片描述

在这里插入图片描述

安装Pinia

执行命令npm install pinia：
在这里插入图片描述

安装完成后，打开package.json，在里边增加了对pinia的依赖：
在这里插入图片描述

创建一个pinia实例，并作为插件传递给应用

打开项目src目录下的main.js文件，初始内容如下：
在这里插入图片描述

修改为如下：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

// 导入createPinia
import { createPinia } from 'pinia'

// 执行createPinia方法，得到实例
const pinia = createPinia()

// 将pinia实例作为插件注册到应用中
createApp(App).use(pinia).mount('#app')