Javascript 使用Vuex 4将数据设置为不在Vue 3中工作的状态

我正在用Vuex 4学习Vue 3，我很确定它很简单，但我看不出来

简而言之，我正试图将一些数据设置为

状态

，以便在我的组件中使用它，但它不起作用

让我向您展示代码：

///store.js

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: {},
    products: []
  },
  mutations: {
    SET_USER: (state, user) => {
      state.user = user;
    },
    SET_PRODUCTS: (state, products) => {
      state.products = products;
    },
  },
  actions: {
    GET_USER: async function ({ commit }) {
      const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')
      commit('SET_USER', user)
    },
    GET_PRODUCTS: async function ({ commit }) {
      const products = await axios.get('https://coding-challenge-api.aerolab.co/products')
      commit('SET_PRODUCTS', products)
    },
  }
})

export default store;

///MyComponent.vue

<template>
  <div class='bg-aerolab-main'>
    {{ user }} {{ productsTest }}
  </div>
</template>

import { computed } from "vue";
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const user = computed(() => store.state.user);
    const productsTest = computed(() => store.state.products);
    console.log(user);
    console.log(productsTest);

    return {
      user,
      productsTest
    };
  }
}

当然，

{{users}}

和

{{productsTest}}

绑定没有显示任何数据以及console.log

PD：我已经尝试直接在我的组件中获取数据，它正在工作，因此它与从API获取的数据无关

任何建议都将被认真考虑

---

提前谢谢你

您必须在挂载的钩子内分派该操作：

import { computed , onMounted} from "vue";
import { useStore } from 'vuex';

export default{
  setup() {
    const store = useStore();
    const user = computed(() => store.state.user);
    const productsTest = computed(() => store.state.products);
   
  onMounted(()=>{
    store.dispatch('GET_USER');
    store.dispatch('GET_PRODUCTS');
  })
    return {
      user,
      productsTest
    };
  }
}

从main.js获取数据 我确信，如果您正在从组件获取数据，所选答案将正常工作。但是，如果您希望按照OP的要求从

main.js

获取数据，或者

app.js

如果您将Vue3与Laravel一起使用，则应在

createApp（）

函数中使用

mounted（）

const app = createApp({
    mounted(){
        store.dispatch('YOUR_ACTION') // GET_USER or GET_PRODUCTS in OP's case
    }
});

请记住在调用之前设置Vuex存储，以便定义

存储

在您的组件中
您可以访问，如下所示：



如果你觉得这个答案在任何方面对你都有用，请投票吧，因为我正在努力提高我在StackOverflow上的声誉。非常感谢。
const app = createApp({
    mounted(){
        store.dispatch('YOUR_ACTION') // GET_USER or GET_PRODUCTS in OP's case
    }
});

import { computed } from "vue";
import { useStore } from "vuex";

setup() {
        const store = useStore();
       
        return {
            products: computed(() => store.state.YOUR_STATE), 
            //replace YOUR_STATE with your own. In OP's case, it's user or products
        };
    }