目录1. pinia介绍2. 安装3. 使用1. src文件夹下新建store/index.js2. main.ts引入3.store下新建js文件,比如userInfo.js4.
官网关于pinia的介绍
Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用。
现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好,因此 Vuex 现在处于维护模式。它仍然可以工作,但不再接受新的功能。对于新的应用程序,建议使用 Pinia。
事实上,Pinia 这款产品最初是为了探索 Vuex 的下一个版本,整合了核心团队关于 Vuex 5 的许多想法。最终,我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容,因此决定将其作为新的官方推荐。
相比于 Vuex,Pinia提供了更简洁直接的 api,并提供了组合式风格的 API,最重要的是,在使用 typescript 时它提供了非常好的类型推导。
npm install pinia --save
import { createPinia } from "pinia";
// 创建store实例
const store = createPinia();
export default store;
import store from '@/store/index.js'
const app = createApp(App);
app.use(store);
import { defineStore } from 'pinia'
export const userStore = defineStore({
id: 'userInfo', // 命名,唯一
state: () => {
return {
userInfo: {}
}
},
actions: {
setUserInfo(data) {
// 可直接通过this访问state属性
this.userInfo = data;
},
}
})
import { userStore } from "@/store/userInfo.js";
export default defineComponent({
setup() {
const store = userStore();
console.log('store实例', store);
return {}
},
安装 pinia-persistedstate-plugin
npm install pinia-persistedstate-plugin
store>index.ts
import type { App } from "vue";
import { createPinia } from "pinia";
import { createPersistedState } from "pinia-persistedstate-plugin";
const store = createPinia();
store.use(createPersistedState());
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };
二次刷新,数据用以持久化存储。
到此这篇关于vue3+pinia的快速入门使用的文章就介绍到这了,更多相关vue3+pinia使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue3+pinia的快速入门使用教程
本文链接: https://www.lsjlt.com/news/164274.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0