<>1. pinia介绍

官网关于pinia的介绍

Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用。

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

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

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

<>2. 安装
npm install pinia --save
<>3. 使用

<>1. src文件夹下新建store/index.js
import { createPinia } from "pinia"; // 创建store实例 const store = createPinia();
export default store;
<>2. main.ts引入
import store from '@/store/index.js' const app = createApp(App); app.use(store)
;
<>3.store下新建js文件,比如userInfo.js
import { defineStore } from 'pinia' export const userStore = defineStore({ id:
'userInfo', // 命名,唯一 state: () => { return { userInfo: {} } }, actions: {
setUserInfo(data) { // 可直接通过this访问state属性 this.userInfo = data; }, } })
<>4. 页面使用
import { userStore } from "@/store/userInfo.js"; export default defineComponent
({ setup() { const store = userStore(); console.log('store实例', store); return {}
},

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信