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 的值了。