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

问题描述

我正在使用 Vuex 4 学习 Vue 3，但我坚持使用一些我确信它很简单但我看不到的东西。

简而言之，我试图在 state 中设置一些数据，以便在我的组件中使用它，但它不起作用。

让我向您展示代码：

//// 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
    };
  }
}

//// main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from 'axios'
import VueAxios from 'vue-axios';
import store from './store';

const app = createApp(App)
  app.use(VueAxios,axios)
  app.use(store)
  app.mount('#app')

当然，{{ users }} 和 {{ productsTest }} 绑定不会显示任何数据以及 console.logs。

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 中获取数据

如果您从组件中获取数据，我确信所选的答案会正常工作。但是，如果您希望 从 main.js 获取数据作为 OP 的要求，或者 app.js 如果您将 Vue3 与 Laravel 一起使用，则应该使用mounted() 在您的 createApp() 函数中。

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

请记住在调用之前设置您的 Vuex 商店，以便定义 store。

在你的组件中

可以访问the computed state with composition API，如下图：

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

如果您发现此答案对您有任何帮助，请点赞，因为我正在努力提高我在 StackOverflow 上的声誉。谢谢！?