將card的vuex換到pinia去

src/api/card.js

@@ -0,0 +1,6 @@
+import ajax from "./ajax";
+
+//通訊錄
+export const getCardData = async () =>
+  ajax(`/Card/getCardData`);
+  

src/main.js

@@ -2,9 +2,9 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { createPinia } from 'pinia'
+import pinia from './store/pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-
+import { initStore } from './utils/initStore';
 
 import liff from '@line/liff';
 import { VueClipboard } from "@soerenmartius/vue3-clipboard";
@@ -14,19 +14,21 @@ import "@/assets/css/common.less";
 // import './registerServiceWorker'
 
 liff.init({
-    liffId: import.meta.env.VITE_APP_LINE_LIFF_ID
-  }).then(() => {
+  liffId: import.meta.env.VITE_APP_LINE_LIFF_ID
+}).then(() => {
+
+  window.liff = liff;
 
-    window.liff = liff;
-    
-    const vue = createApp(App);
-    const pinia = createPinia();
-    pinia.use(piniaPluginPersistedstate);
-    // 將LIFF實例提供給應用
-    vue.use(VueClipboard);
-    vue.use(pinia);
-    vue.use(store).use(router).mount("#app");
+  const vue = createApp(App);
+  pinia.use(piniaPluginPersistedstate);
+  // 將LIFF實例提供給應用
+  vue.use(VueClipboard);
+  vue.use(pinia);
+  // 初始化Store
+  initStore(pinia);
   
-  }).catch((error) => {
-    console.error('初始化 LIFF 時出錯:', error);
-  });
+  vue.use(store).use(router).mount("#app");
+
+}).catch((error) => {
+  console.error('初始化 LIFF 時出錯:', error);
+});

src/store/card.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+
+import { updateCusCard } from "@/api";
+
+export const useCardStore = defineStore('card', {
+    state: () => {
+        return {
+            cusCard: '',
+            vipCard: '',
+        }
+    },
+    getters: {
+    },
+    actions: {
+        async updateCusCard(payload) {
+            let res = await updateCusCard(payload);
+            if (res.code === 200) {
+                this.cusCard = payload;
+                return true;
+            }
+
+            return false;
+        }
+    },
+    persist: true
+})

src/store/pinia.js

@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia;

src/utils/initStore.js

@@ -0,0 +1,12 @@
+import { useCardStore } from '@/store/card.js';
+import { getCardData } from '@/api/card.js';
+
+export const initStore = async (pinia) => {
+    const cardStore = useCardStore();
+
+    let res = await getCardData();
+    if (res.code === 200) {
+        cardStore.cusCard = res.data.cus_card;
+        cardStore.vipCard = res.data.vip_card;
+    }
+};

src/views/Card/Edit.vue

@@ -4,22 +4,23 @@ import FlexView from "@/components/FlexView.vue";
 
 import { ref, reactive, watch } from "vue";
 
-import { updateCusCard } from "@/api";
-import { useStore } from "vuex";
+import { useCardStore } from '@/store/card'
+
 import { useRouter } from "vue-router";
 
 import axios from "axios";
 import _ from "lodash";
 
-import { showToast } from "vant";
-import { showLoadingToast, showSuccessToast } from "vant";
+import { showToast, showLoadingToast, showSuccessToast,showFailToast } from "vant";
 
 import { Cropper } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
+import { onMounted } from "vue";
 
 const URL = window.URL || window.webkitURL;
 
-const store = useStore();
+const cardStore = useCardStore();
+
 const router = useRouter();
 
 const showNfc = ref(false);
@@ -78,6 +79,12 @@ const form = ref({
   },
 });
 
+onMounted(() => {
+  if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) {
+    form.value = JSON.parse(cardStore.cusCard.cus_card);
+  }
+});
+
 const sizeColumns = ref([
   { text: "xxs", value: "xxs" },
   { text: "xs", value: "xs" },
@@ -91,13 +98,6 @@ const sizeColumns = ref([
   { text: "5xl", value: "5xl" },
 ]);
 
-if (
-  store.state.user.userInfo.cus_card &&
-  store.state.user.userInfo.cus_card.length > 0
-) {
-  form.value = JSON.parse(_.clone(store.state.user.userInfo.cus_card));
-}
-
 watch(
   () => form.value.title,
   (newVal) => {
@@ -273,18 +273,28 @@ const handleSubmit = async () => {
     forbidClick: true,
   });
 
-  let res = await updateCusCard({
-    user_id: user_id,
+  let cusCard = {
     card_title: form.value.title,
     show_cus: form.value.showNfc,
     cus_card: JSON.stringify(form.value),
-  });
-  if (res.code === 200) {
-    store.commit("user/setCusCard", JSON.stringify(form.value));
+  };
+
+  let res = cardStore.updateCusCard(cusCard);
+
+  if(res){
     showSuccessToast("建立成功");
-  } else {
-    showToast.fail("建立失敗");
+  }else{
+    showFailToast("建立失敗");    
   }
+
+  // let res = await updateCusCard(cusCard);
+
+  // if (res.code === 200) {
+  //   cardStore.cusCard = cusCard;
+  //   showSuccessToast("建立成功");
+  // } else {
+  //   showToast.fail("建立失敗");
+  // }
   router.push("/card/edit");
 };
 </script>