Vue 3에서 Vuex 4로 데이터를 설정하지 않음

Vue 3에서 Vuex 4로 데이터를 설정하지 않음

나는 Vue 3를 Vuex 4와 함께 배우고 있는데, 나는 그것이 간단하다고 확신하지만 나는 볼 수 없는 무언가에 사로잡혀 있다.

간단히 말해서, 나는 몇 가지 데이터를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.부에를 하다

<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.properties와 마찬가지로 어떤 데이터도 표시하지 않는다.

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에서 요청했던 대로 데이터 가져오기를 원하거나 Laravel과 함께 Vue3를 사용하는 경우mounted()당신 안에createApp()기능을 발휘하다

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

전화하기 전에 Vuex 스토어를 설정하는 것을 잊지 마십시오.store정의된다.

구성 요소

아래와 같이 컴포지션 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
        };
    }

참조URL: https://stackoverflow.com/questions/66845766/setting-data-in-state-not-working-in-vue-3-with-vuex-4