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）。

但是，正确的方法 是将方法移到设置函数中（将其定义为 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.

里面

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

Vue 3: How to access state in a method function

vue.js

vue-component

vuex

vuejs3

vue-composition-api