vue3中 pinia 的运用

1、在 store 文件夹中定义相关的 js 文件

图片

pptWhiteList.js 文件的内容(代码内容为:登录用户是否是白名单用户,在其他文件中要用到此数据):

import { defineStore } from "pinia";
import aiApi from "../modules/index";
import { storageUtils } from "/@common/usedPackages/index.js";

export const pptWhiteListStore = defineStore("whiteListStore", {
  // 广告平台数据
  state: () => ({
    whiteListVal: 10, // 默认10, 非白名单,走厂商 ; 11 为白名单,走新阿里流程
  }),
  getters: {},
  actions: {
    async getWhiteListData() {
      const params = {
        userId: storageUtils.local.get("login_tokenInfo").userDomainId,
        sourceChannel: storageUtils.session.get("clientId"),
      };
      const res = await aiApi.getWhitelistInfo(params);
      if (res.success && res.data) {
        this.whiteListVal = res.data.aipptSupplier;
        // console.warn("store 获取白名单结果为---", this.whiteListVal);
      }
    },
  },
});

2、在其他文件中引用,例如在demo.vue 中引用。

2.1 方法一,在vue3中运用

先引入 

import { pptWhiteListStore } from "../store/pptWhiteList.js";

定义

const whiteListStore = pptWhiteListStore();

在代码中运用,判断白名单数值

console.log("测试的获取的白名单的信息值 ---", whiteListStore.whiteListVal);

2.2 在vue2中运用

引入

import { pptWhiteListStore } from "../../store/pptWhiteList.js";

在 computed 中定义

computed: {
    whiteListVal() {
        return pptWhiteListStore().whiteListVal;
    },
}

然后就可以直接运用 whiteListVal 的值了。

posted @ 2025-10-11 15:54  smil、梵音  阅读(11)  评论(0)    收藏  举报