快捷導(dǎo)航

vue3+pinia的快速入門(mén)使用教程

更新時(shí)間：2022年07月15日 09:00:32 作者：溫情key

Pinia是Vue的一個(gè)存儲(chǔ)庫(kù),它允許你跨組件/頁(yè)面共享狀態(tài),下面這篇文章主要給大家介紹了關(guān)于vue3+pinia的快速入門(mén)使用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. pinia介紹

官網(wǎng)關(guān)于pinia的介紹

Pinia 是一個(gè)狀態(tài)管理庫(kù)，由 Vue 核心團(tuán)隊(duì)維護(hù)，對(duì) Vue 2 和 Vue 3 都可用。

現(xiàn)有用戶(hù)可能對(duì) Vuex 更熟悉，它是 Vue 之前的官方狀態(tài)管理庫(kù)。由于 Pinia 在生態(tài)系統(tǒng)中能夠承擔(dān)相同的職責(zé)且能做得更好，因此 Vuex 現(xiàn)在處于維護(hù)模式。它仍然可以工作，但不再接受新的功能。對(duì)于新的應(yīng)用程序，建議使用 Pinia。

事實(shí)上，Pinia 這款產(chǎn)品最初是為了探索 Vuex 的下一個(gè)版本，整合了核心團(tuán)隊(duì)關(guān)于 Vuex 5 的許多想法。最終，我們意識(shí)到 Pinia 已經(jīng)實(shí)現(xiàn)了我們想要在 Vuex 5 中提供的大部分內(nèi)容，因此決定將其作為新的官方推薦。

相比于 Vuex，Pinia提供了更簡(jiǎn)潔直接的 API，并提供了組合式風(fēng)格的 API，最重要的是，在使用 TypeScript 時(shí)它提供了非常好的類(lèi)型推導(dǎo)。

2. 安裝

npm install pinia --save

3. 使用

1. src文件夾下新建store/index.js

import { createPinia } from "pinia";
// 創(chuàng)建store實(shí)例
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) {
            // 可直接通過(guò)this訪問(wèn)state屬性
            this.userInfo = data;
        },
    }
})

4. 頁(yè)面使用

import { userStore } from "@/store/userInfo.js";

export default defineComponent({
  setup() {
  const store = userStore();
	
  console.log('store實(shí)例', store);
  return {}
  },

補(bǔ)充：存儲(chǔ)狀態(tài)并持久化存儲(chǔ)

安裝 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 };

二次刷新，數(shù)據(jù)用以持久化存儲(chǔ)。