abp-vnext-pro 實戰（六，vue 前端狀態pinia）

在login的時候把所有寫入全局store，

        console.log('----------------從數據庫獲取字典--------------------');
        const appStore = useAppStore();
        const dataDictionaryServiceProxy = new DataDictionaryServiceProxy();
        const detailInput = new PagingDataDictionaryDetailInput();
        detailInput.dataDictionaryId = '3a0cd740-f56e-db56-2a4e-00c1e9fb6880';
        const obj = (await dataDictionaryServiceProxy.pageDetail(detailInput));
        console.log(obj);
        const employees = new Map();
        for (var dic of obj.items) {
          console.log(dic.code + ':' + dic.displayText);
          employees.set(dic.code, dic.displayText);
        }

        appStore.setDictionary(employees);

取值

export function dataDictGetText(code) {
  const appStore = useAppStore();
  const dict = appStore.getDictionary;
  console.log(dict);
  if(dict!=null)
    return dict.get(code+'');

}

pinia 狀態管理，在user.ts

interface AppState {

  //字典數據
  dataDictionary: Map<string, string>;
}
let timeId: TimeoutHandle;
export const useAppStore = defineStore({
  id: 'app',
  state: (): AppState => ({

    dataDictionary: undefined,
  }),
  getters: {
     getDictionary(): Map<string,string> {
      return this.dataDictionary || new Map(JSON.parse(localStorage.getItem('app_dict')));
    },
  actions: {
    setDictionary(dict): void {

       this.dataDictionary = dict;
       localStorage.setItem('app_dict', JSON.stringify([...dict]));

    },

瀏覽器刷新按鈕，store的狀態又變成初始值了 undefined， 上面用了localStorage來保存map