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

2022-07-15 10:00:43

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

二次重新整理，資料用以持久化儲存。