import{_ as s,c as n,o as a,a as p}from"./app.2b769fcb.js";const i=JSON.parse('{"title":"Pinia \u72B6\u6001\u7BA1\u7406","description":"","frontmatter":{},"headers":[{"level":3,"title":"options API:","slug":"options-api"},{"level":3,"title":"Composition API:","slug":"composition-api"}],"relativePath":"guide/vue3/pinia.md","lastUpdated":1661153879000}'),l={name:"guide/vue3/pinia.md"},o=p(`

Pinia \u72B6\u6001\u7BA1\u7406

\u4E0B\u4E00\u4EE3 vuex\uFF0C\u4F7F\u7528\u6781\u5176\u65B9\u4FBF\uFF0Cts \u517C\u5BB9\u597D

\u76EE\u5F55\u7ED3\u6784

bash
\u251C\u2500\u2500 store
\u2502   \u251C\u2500\u2500 modules
\u2502   \u2502   \u2514\u2500\u2500 user.js
\u2502   \u251C\u2500\u2500 index.js

\u76EE\u524Dpinia\u5206\u4E3A\u4E24\u79CD\u7F16\u7A0B\u6A21\u5F0F,options API\u548C Composition API\uFF0C\u6211\u4EEC\u8FD9\u8FB9\u90FD\u4F1A\u5217\u4E3E\u51FA\u6765\u5B9E\u73B0\u7684\u4E1A\u52A1\u903B\u8F91\u6548\u679C\u662F\u4E00\u6837\u7684\uFF0C\u63D0\u4F9B\u5927\u5BB6\u601D\u8DEF

options API:

javascript
interface StoreUser {
  token: string;
  info: Record<any, any>;
}

export const useUserStore = defineStore({
  id: 'app-user',
  state: (): StoreUser => ({
    token: token,
    info: {},
  }),
  getters: {
    getUserInfo(): any {
      return this.info || {};
    },
  },
  actions: {
    setInfo(info: any) {
      this.info = info ? info : '';
    },
    login() {
      return new Promise((resolve) => {
        const { data } = loginPassword();
        watch(data, () => {
          this.setInfo(data.value);
          // useCookies().set(VITE_TOKEN_KEY as string, data.value.token);
          resolve(data.value);
        });
      });
    },
  },
});

Composition API:

javascript
export const useUserStore = defineStore('app-user', () => {
  const Token = ref(token);
  const info = ref<Record<any, any>>({});
  const setInfo = (info: any) => {
    info.value = info ? info : '';
  };
  const getUserInfo = () => {
    return info || {};
  };
  const login = () => {
    return new Promise((resolve) => {
      const { data } = loginPassword();
      watch(data, () => {
        setInfo(data.value);
        // useCookies().set(VITE_TOKEN_KEY as string, data.value.token);
        resolve(data.value);
      });
    });
  };
  return {
    Token,
    info,
    setInfo,
    login,
    getUserInfo,
  };
})

\u4F7F\u7528

html
<script lang="ts" setup>
  import { useUserStore } from "@/store/modules/user";
  const userStore = useUserStore();
  userStore.login();
</script>
`,11),e=[o];function t(c,r,F,y,D,A){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};