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

Posted on by

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使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：