vue3+pinia的快速入门使用教程

Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

目录

• 1. pinia介绍
• 2. 安装
• 3. 使用
• 1. src文件夹下新建store/index.js
• 2. main.ts引入
• 3.store下新建js文件，比如userInfo.js
• 4. 页面使用
• 补充：存储状态并持久化存储
• 总结

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 {}
  },

补充：存储状态并持久化存储

安装 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使用内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• 一文详解Pinia和Vuex与两个Vue状态管理模式
• Vue状态管理库Pinia详细介绍
• 详解Vue3-pinia状态管理
• vue3-pinia-ts项目中的使用示例详解
• vuex5中的Pinia插件机制
• Vue新一代状态管理工具Pinia的具体使用
• vue中使用 pinia 全局状态管理的实现
• Vue生态的新成员Pinia的详细介绍
• Vue替代vuex的存储库Pinia详细介绍