Vue pinia模塊化全局注冊(cè)詳解

更新時(shí)間：2023年02月02日 08:52:30 作者：IN~Trying

這篇文章主要介紹了Vue pinia模塊化全局注冊(cè)，Pinia是Vue.js團(tuán)隊(duì)成員專門為Vue開發(fā)的一個(gè)全新的狀態(tài)管理庫(kù)，并且已經(jīng)被納入官方github

Vue3中對(duì)pinia模塊化全局注冊(cè)

項(xiàng)目小使用簡(jiǎn)易的方式還不覺得，但是項(xiàng)目大了后就會(huì)發(fā)現(xiàn)引入的東西有些重復(fù)了

安裝

yarn add pinia
# or with npm
npm install pinia

掛載實(shí)例

main.ts中掛載pinia實(shí)例

import { createPinia } from "pinia";
...
const pinia = createPinia()
app.use(pinia);

話不多說，直接貼代碼

在scr下創(chuàng)建stores文件夾，創(chuàng)建index.ts文件

// 使用options API模式定義,vue2的組件模型形式類似
// import useDemoStore  from "./modules/addNumber";
// export interface PiniaStore {
//     useDemoStore:ReturnType<typeof useDemoStore>
// }
// const piniaStore: PiniaStore = {} as PiniaStore;
// /**
//  * 注冊(cè)app狀態(tài)庫(kù)
//  */
// export const registerStore = () => {
//     piniaStore.useDemoStore = useDemoStore()
// };
// export default piniaStore;
// 使用setup模式定義
import { useDemoStore } from "./modules/addNumber";
// import textContentStore from "./modules/textContent";  //單一個(gè)方法
import { textContentStore, usefruitStore } from "./modules/textContent"; //多個(gè)不同需緩存的方法
export interface PiniaStore {
  useDemoStore: ReturnType<typeof useDemoStore>;
  textContentStore: ReturnType<typeof textContentStore>;
  usefruitStore: ReturnType<typeof usefruitStore>;
}
const piniaStore: PiniaStore = {} as PiniaStore;
/**
 * 注冊(cè)app狀態(tài)庫(kù)
 */
export const registerStore = () => {
  piniaStore.useDemoStore = useDemoStore();
  piniaStore.textContentStore = textContentStore();
  piniaStore.usefruitStore = usefruitStore();
};
export default piniaStore;

scr/stores/modules/

新建你的store.ts
這里使用了兩種不同的數(shù)據(jù)持久化插件，如果不需要可忽略插件

1、pinia-plugin-persist 插件的數(shù)據(jù)持久化使用

2、pinia-plugin-persistedstate插件

兩個(gè)插件的屬性使用不一樣，需注意
代碼使用了兩個(gè)不同的寫法，

1、使用options API模式定義,vue2的組件模型形式類似

2、使用setup模式定義

主要是用作全局注冊(cè)

import { defineStore } from "pinia";
import { ref } from "vue";
//  pinia-plugin-persist 插件的數(shù)據(jù)持久化使用
export const textContentStore = defineStore({
  id: "goods",
  state: () => {
    return {
      fruit: "蘋果",
      price: 15,
    };
  },
  actions: {
    changeName() {
      this.fruit = "雪梨";
    },
    changePrice(val: number) {
      this.price = val;
    },
  },
  // 開啟數(shù)據(jù)緩存
  persist: {
    enabled: true,
    key: "goods",
    //   strategies: [
    //     {
    //       storage: localStorage,
    //       paths: ['accessToken']
    //     },
    strategies: [
      //   自定義存儲(chǔ)到 sessionStorage 和 localStorage
      { key: "fruit", storage: sessionStorage, paths: ["fruit"] },
      { key: "price", storage: localStorage, paths: ["price"] },
    ],
  },
});
export const usefruitStore = defineStore(
  "goods1",
  () => {
    const fruit1 = ref<string>("香蕉");
    const price1 = ref<number>(10);
    function changeName1() {
      fruit1.value = "雪梨";
    }
    function changePrice1(val: number) {
      price1.value = val;
    }
    return { fruit1, price1, changeName1, changePrice1 };
  },
  {
    //持久化存儲(chǔ)配置 ，必須同步詳情可看官方說明文檔
    persist: {
      key: "_pinia_price1",
      storage: sessionStorage,
      paths: ["fruit1"],
    },
  }
);
// export const textContentStore = defineStore(
//   "counter",
//   () => {
//     const fruit = ref<string>("蘋果");
//     const price = ref<number>(100);
//     function changeName() {
//       fruit.value = "雪梨";
//     }
//     function changePrice(val:number) {
//         price.value = val
//     }
//     return { fruit, price, changeName, changePrice, };
//   },
// //   {
// //     //持久化存儲(chǔ)配置 ，必須同步詳情可看官方說明文檔
// //     persist: {
// //       key: "_pinia_fruit",
// //       storage: sessionStorage,
// //       paths: ["fruit"],
// //     },
// //   }
// );

頁(yè)面

到頁(yè)面上的使用

<h2>水果</h2>
    <h3>名稱1：{{ fruit }}---價(jià)格：{{ price }}</h3>
    <button @click="changeName">修改名稱</button>
    <button @click="ChangePrice">修改價(jià)格</button>
    --------------------------------------------
    <h3>名稱2：{{ fruit1 }}---價(jià)格：{{ price1 }}</h3>
    <button @click="changeName1">修改名稱1</button>
    <button @click="changePrice1(120)">修改價(jià)格1</button>
import PiniaStore from "../stores";
import { storeToRefs } from "pinia";
// setup composition API模式
const { fruit, price } = storeToRefs(PiniaStore.textContentStore);
const { changeName, changePrice } = PiniaStore.textContentStore;
const { fruit1, price1 } = storeToRefs(PiniaStore.usefruitStore);

相對(duì)來說項(xiàng)目小的話沒什么必要做全局，但是項(xiàng)目大了可能這樣會(huì)好維護(hù)一些

當(dāng)然也會(huì)有更好的方式，只是我沒發(fā)現(xiàn)

最后補(bǔ)充

打包解耦

到這里還不行，為了讓appStore實(shí)例與項(xiàng)目解耦，在構(gòu)建時(shí)要把a(bǔ)ppStore抽取到公共chunk，在vite.config.ts做如下配置

build: {
outDir: "dist",
rollupOptions: {
output: {
manualChunks(id) {
//靜態(tài)資源分拆打包
...其他配置
// 將pinia的全局庫(kù)實(shí)例打包進(jìn)vendor，避免和頁(yè)面一起打包造成資源重復(fù)引入
if (id.includes(resolve(__dirname, "/src/store/index.ts"))) {
return "vendor";
}
},
},
},
}

到此這篇關(guān)于Vue pinia模塊化全局注冊(cè)詳解的文章就介紹到這了,更多相關(guān)Vue pinia模塊化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: