Vue3 vuex "TypeError: vuex__"WEBPACK_IPORTED_MODULE_1_.Store.commit이 함수가 아닙니다.

Vue3 vuex "TypeError: vuex__"WEBPACK_IPORTED_MODULE_1_.Store.commit이 함수가 아닙니다.

따라서 vuex에서 정적 json 데이터를 가져와 "projects" 상태로 커밋하려고 하는데 "Store.commit is not a function" 오류가 나타납니다.

내가 뭘 빼놓았나요?

Vue3의 vuex에서 이 작업을 수행한다는 것을 명심하십시오.

//store.js
import axios from 'axios';
import { createStore, Store } from 'vuex'


export default createStore({
  state: {
    projects:[]
  },
  mutations: {
    SET_PROJECTS: (state, projects) => {
      state.projects = projects;
    }
  },
  actions: {
  },
  modules: {
  }
});

const getPrjectData = () => {

  axios
  .get('static json URL here')
  .then(response => {
    Store.commit('SET_PROJECTS', response.data.projects);
  })
  .catch(err => console.log(err));   
}

getPrjectData();

함수를 작업으로 변환합니다.

actions: {
  getPrjectData({ commit }) {
    axios
    .get('static json URL here')
    .then(response => {
      commit('SET_PROJECTS', response.data.projects);
    })
    .catch(err => console.log(err));   
  }
}

다음과 같이 액션을 호출합니다.

옵션 API

this.$store.dispatch('getPrjectData');

컴포지션 API

import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore();
    store.dispatch('getPrjectData');
  }
}

언급URL : https://stackoverflow.com/questions/65679771/vue3-vuex-typeerror-vuex-webpack-imported-module-1-store-commit-is-not-a-fu