Vue 3：如何访问方法函数中的状态

Question

刚接触 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)
            },
    },

Answer 1

您的setup函数必须通过返回一个对象来公开您希望在组件实例上可用的任何内容：

setup() {
  const store = useStore();
  const uid = computed(() => store.state.user.data.id);
  const loading = ref(true);
  return { loading, uid }
},

现在this.loading和this.uid可以在任何方法中使用，并且它们都可以在模板中访问（如loading和uid）。

但是，执行此操作的正确方法是将方法移到 setup 函数内（将其定义为 a const），如下所示：

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 }
},

如果模板需要它，您可以将其添加到设置中返回的对象中。
如果不是的话，就没必要曝光。

理想情况下，当您完成重构时，methods、computed、watch、任何钩子（例如：mounted、beforeDestroy）的所有成员都应该已移至 内部setup。