Vue 新手，因此可能缺少 Vuex 的基本部分，或者更可能是組合 API 的作業方式。我正在嘗試向我的 API 發出 POST 請求。我不想將用戶 ID 存盤在會話存盤中，而是想從我的商店中檢索它。我似乎無法將計算出的狀態值檢索傳遞給我的異步 API 方法呼叫。它被記錄為未定義，我的用戶在登錄或注冊后被填充。指導贊賞！
組件的組合 API 腳本標記
export default {
name: 'ModalContent',
setup() {
const store = useStore();
const uid = computed(() => store.state.user.data.id);
const loading = ref(true);
},
data() {
return {
session_name: "",
dated: "",
time_est: 60,
};
},
methods: {
async newSession() {
const { session_name, dated, time_est, uid } = this;
console.log(uid) ***UNDEFINED***
// const res = await fetch(
// "https://www...",
}
Vuex 商店
const store = createStore({
state: {
status: '',
user: {},
token: sessionStorage.getItem('TOKEN'),
},
getters: {},
actions: {
storeUserData({commit}, data) {
commit('setUser', data.user);
commit('setToken', data.token)
},
},
uj5u.com熱心網友回復：
您的setup函式必須通過回傳一個物件來公開您希望在組件實體上可用的任何內容：
setup() {
const store = useStore();
const uid = computed(() => store.state.user.data.id);
const loading = ref(true);
return { loading, uid }
},
現在this.loading和this.uid將在任何方法中作業，并且它們都可以在模板中訪問（asloading和uid）。
但是，這樣做的正確方法const是在 setup 函式中移動方法（將其定義為 a ），如下所示：
setup() {
const store = useStore();
const uid = computed(() => store.state.user.data.id);
const loading = ref(true);
const newSession = async () => {
return await //... call your API
}
return { loading, uid, newSession }
},
如果模板需要它，則將其添加到 setup.xml 中回傳的物件中。
如果沒有，就沒有必要暴露它。
理想情況下，當你完成重構時，所有的methods, computed, watch, 任何鉤子（例如：mounted, beforeDestroy）都應該被移到setup.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426726.html
標籤：Vue.js Vue组件 Vuex Vuejs3 vue-composition-api
下一篇：單獨的Vue樣式插槽